How can I Add Google My Maps API on my website?

Question

Hello Friends,

I want to Add Google My Maps API in my website, but didn't find any good reference. Please help me. Thanks

Answer 1

First you need to register with google and get a MAPS api key:

http://code.google.com/apis/maps/signup.html

Then you need to embed some javascript in your pages/templates:

 <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=__your_key_here__" type="text/javascript"></script>

Another bit to draw the actual map:

<script type="text/javascript">
    //<![CDATA[ 
    function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
        });
    return marker;
    }

    function load() {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(51.16349933440274, 4.371164292063712 ), 6);
        var point = new GLatLng(51.16349933440274, 4.371164292063712);
        var marker = createMarker(point,'<div style="width:240px"> \
          Place:    <b>ANTWERPEN          </b><br> \
          </div>')
          map.addOverlay(marker);
    }
   }
   //]]>
  </script>

This tutorial was useful:

http://econym.org.uk/gmap

The maps API documentation is very good:

http://code.google.com/apis/maps/documentation/javascript/

Note that version 3 of the maps api has recently been released (it has lots of enhancements for mobile browsers, so you might want to look into that).

This might be a candidate to be moved to stackoverflow.com