Learn Google Maps

Adding a google map to blogger

Before you start you are required to get Google Maps API key freely available at http://maps.google.com/apis/maps/signup.html, and enter the url of your blog to get the key. eg for My blog http://usegmap.blogspot.com/

You need to edit the template for your blog. (Warning: editing your template can lead to breaking your blog, it might be good to copy and paste your template into something like notepad before changing it).Just under the <head> tag, which should be near the top, add the line

<script src="http://maps.google.com/maps?file=api&v=1&key=xxxx" type="text/javascript"></script>

and replace xxxx with the key you received.

Now its your turn to decide where on you blog to place map.insert the code:

<div id="map" style="width: 100%; height: 300px"></div>

Finally, add the following code just above the </body> tag in the template (should be near the bottom)

<script type="text/javascript">
    //<![CDATA[

    function createMarker(x, y, title, thumbnail, image) {
      var point = new GPoint(x, y);
      var marker = new GMarker(point);
      var html = '<center>' + title + '<br /><a href="' + image + '" target="_blank"><img src="' + thumbnail + '" /></a><br /></center>';

      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
      });

      map.addOverlay(marker);
    }
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    mapTypes = map.getMapTypes();
    map.setMapType(mapTypes[1]);


    //  ** change this line to set the location of the map and the zoom level. ** //
    map.centerAndZoom(new GPoint(24.599310, 67.918413), 4);    

    
    // ** add createMarker function calls to create markers. ** //
    createMarker(24.60215306282, 67.920666217804, 'Test Link', 'http://www.test.com/test.jpg', 'http://www.test.com/1.jpg');


    //]]>
    </script>

To change the location the map initially displays, edit the line:

map.centerAndZoom(new GPoint(24.599310, 67.918413), 4);

To add markers to the map, add lines such as:

createMarker(latitude, longitude, 'title', 'thumbnail url', 'image url');

an example is:

createMarker(24.60215306282, 67.920666217804, 'Test Marker', 'http://www.testtest.com/mapImages/t1.jpg', 'http://www.testtest.com/mapImages/1.jpg');

Learn Google Maps

Friday, 25 March 2011

Adding a google map to blogger

No comments:

Post a Comment