Google Maps on your Web Site

Google provides an API that can be integrated with your PHP scripts to display interactive maps on your website.

The first thing you need to do is create the javascript. It is easier to keep it in a separate file, so create a file called 'googlemap.js'. Then use the following javascript as a guide:

function googlemap(){
    //<![CDATA[

    var map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.centerAndZoom(new GPoint(-78.85, 42.985), 7);

    var icon = new GIcon();
    icon.image = "src/icon.png";
    icon.shadow = "src/iconshadow.png";
    icon.iconSize = new GSize(40, 40);
    icon.shadowSize = new GSize(56, 40);
    icon.iconAnchor = new GPoint(20, 40);
    icon.infoWindowAnchor = new GPoint(20, 20);

    var point1 = new GPoint(-78.821683, 43.018429);
    var marker1 = new GMarker(point1, icon);
    var point1HTML = "<div style='font-family: Verdana; font-size: 10px;'>Address & Phone goes here</div>";

    GEvent.addListener(marker1, "click", function() {marker1.openInfoWindowHtml(point1HTML);});

    map.addOverlay(marker1);

    //]]
}

Then, add this code between the <head> tags in your HTML:

Replace YourMapsAPIKey with your Google Maps API Key. If you don't have one, you can request one here.

Then, place this code in your HTML source, where you want the map to appear:

Make sure you have a dummy image somewhere on your site, to repalce 'src/void.gif'.

Need assistance with your project? Universal Web Services can help.
Contact us to request a quote.

Personal tools

Google Maps on your Web Site