Google maps in blog

Before we start, symbol < and > are replaced with { and } in this post because of the limitation of html acceptance in blogger.

First you would have to apply an API key that is registered to your web URL. You can make your application at http://www.google.com/apis/maps/. After you get the key, on the same page, google map API will give you an example web page to get you started on your way to mapping glory. You can copy and patste the html code to your web page, however the blogger template won't accept a few html tags such as the {head} tag, so you would have to do some modifications to make it work in your blog. Also, trying to copy and paste the code to a post in blog is futile: an error message pops up when you click the Publish icon telling you that "Your HTML cannot be accepted: Tag is not allowed..."

A few steps involve in the code adaptation:

First, find the {head} tag in your blog template and copy/paste the following code right after the {head} tag:

{script src='http://maps.google.com/maps?file=api&v=2&key=your API key' type='text/javascript'/}

remember to replace your API key to your own API key receiced from Google.

Second, find the {/body} tag in your blogger template and copy/paste the following code before the {/body} tag:

{script type="text/javascript"}

//{![CDATA[

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl(1));
map.setCenter(new GLatLng(15.15697371337768, 106.787109375), 5, G_HYBRID_MAP);

}

//]]}
{/script}

the map.addControl(new GSmallMapcontrol()) gives you the scale control (you can replace Small to Large if you like) and map.addControl(new GMaptype control()) gives you 3 icons on map to switch 3 map types (put number in the () gives you a smaller icon). Both codes can be taken off.

map.setCenter(new GLatLng(15.15697371337768, 106.787109375), 5, G_HYBRID_MAP); controls the center position of your map (by designating the Latitude and Longitude), the zoom in factor, and your default map type. You can set your map as normal map, satellite photos map or a combination of both by changing the code with G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP respectively. Using the following website to get the info of Latitude, Longitude: http://www.gorissen.info/Pierre/maps/googleMapLocationv3.php

Third, put the following code to the place you want it to be

{div id="map" style="width:210px; height:350px"} map loading...{/div}

you can adjust the map size by changing the number in red.

Others

To hide controls on the map when the mouse is out of the frame and to show them when the mouse is over the map, copy and paste the code below.

// Hide Controls
map.hideControls();

GEvent.addListener(map, "mouseover", function(){map.showControls(); });

GEvent.addListener(map, "mouseout", function(){map.hideControls(); });

Markers and info windows on the map copy and paste the following code:

      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
      
      var point = new GLatLng(43.91892,-78.89231);
      var marker = createMarker(point,'Some stuff to display in the Info Window')
      map.addOverlay(marker);

For advance control of google map API you can refer to the following website:

• Google Maps API Documentation
• Google Maps API Tutorial
• Google Maps API Blog
• Map how to blogger
• Degrees, Minutes, Seconds and Decimal Degrees Latitude/Longitude Conversions
• OMap