Adding a google map to blogger

2005-07-03T20:17:00.000-07:00

You need to get a Google Maps API key for your blog.
go to http://maps.google.com/apis/maps/signup.html, and enter the url of your blog to get the key. eg for this blog i entered http://googlemap.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 you have to decide where in your page to put the map. For this blog, i've put it just above where blogger inserts the blog posts. ie i put it just above the <Blogger> tag in the template. Just above that tag, 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(138.599310, -34.918413), 4);    

    
    // ** add createMarker function calls to create markers. ** //
    createMarker(138.60215306282, -34.920666217804, 'The Adelaide City Council Library', 'http://www.adelaideindex.com/mapImages/t1.jpg', 'http://www.adelaideindex.com/mapImages/1.jpg');


    //]]>
    </script>

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


    map.centerAndZoom(new GPoint(138.599310, -34.918413), 4);

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


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

an example is:


    createMarker(138.60215306282, -34.920666217804, 'The Adelaide City Council Library', 'http://www.adelaideindex.com/mapImages/t1.jpg', 'http://www.adelaideindex.com/mapImages/1.jpg');

Google Map

Adding a google map to blogger