The Blog Doctor.

Google Map with Markers in Blog.

In a previous post we saw how to add a Google Map to blog. Sometimes having a simple map is not enough. Markers are used on a map to identify points on the map. See picture below (Click on picture to enlarge it):

In above picture you can see a Google Map with Markers in my test blog. Here are the steps to put such a map in your blog......................

STEP 1. Get a Google API key for your blog.

In the first step you have to generate a Google API key for your blog here.
Put a check in "I have read and agree with the terms and conditions (printable version)" box by clicking it. Paste your blogspot URL in the text box and click Generate API Key button. Copy down the key generated.

STEP 2. Modify the Template Code.

Login at Blogger.com

Click Layout link under Blog Title on Dashboard.

Click Edit HTML subtab of Layout tab.

Scroll down in Template Code box and change :

<body>

TO :

<body onload='initialize()' onunload='GUnload()'>

Save Template.

STEP 3. ADD HTML GADGET in sidebar.

Login at Blogger.com

Click Layout link on Dashboard under blog title.

Click Add Gadget link on Page Elements subtab of Layout tab.

In popup window scroll down and click HTML/Javascript Gadget.

Copy the code below and paste it in Contents window of the HTML gadget :

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

<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(latlng));
}
}
}

</script>

<div id="map_canvas" style="width: 500px; height: 300px"></div>

Customize the above code by :

1. Paste in the Google API key obtained in Step 1 where it says "PASTE_YOUR_GOOGLE_API_KEY_HERE".

2. Put in the latitude and longitude of your map center in this line :

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

3. The above code will add 10 markers at random locations. For more information checkout the Google Maps documentation.

Save Gadget.

Valentine's Day Wishes from Eiffel Tower Paris.

Mumbai Marathon Map Pedometer.

Add Google Map Search to Blog.

Add a Country Map to your Blog.

To add a country map to your blog............

first you willhave to follow the instructions in Add a Google Map to your blog. (Step 1) After having added the map to your blog you need the Latitude and Longitude of the point on earth where you want to center your map. Do this by entering the place name in Google along with the words 'latitude longitude' and pressing Search.

Google will give the coordinates of Latitude and Longitude for that place. Enter these figures in the following line of code in your template (Step 2). This line of code is there in your template because you entered it in Step 1 above.

map.setCenter(new GLatLng(37.4419, -122.1419), 5);

The figures in brackets are the Latitude and the Longitude of the place where you want to center the map. The next figure - 5 - is the zoom factor. NOTE that Google does not have the same detailed maps of the entire planet. If you enter a very large number here the map will not come up on the page. So start with a small figure like 5 and increase it till Google says it does not have more detailed maps.
I have added the map of India as shown in following picture :

Click on Image for larger preview.

Now you will want to add some place markers to the map. First create an image representative of the place where you will place the marker and save in PNG format. Then upload the image to a freeserver like Googlepages and copy down the url (Step 3). Then in your blog template add the following lines just after the line you added in Step 2 to the template :

var point = new GLatLng(18.96,72.82);
var marker = createMarker(point,'<div style="width:240px">NAME OF PLACE<br /><a href="MY SITE URL">Link</a> to my home page<br /><img src="URL OF PLACE IMAGE" width=XXX height=YYY></div>')
map.addOverlay(marker);

Enter the Latitude and Longitude of the place where you want to place the marker in line 1 of the above code. Enter the place name instead of 'NAME OF MY PLACE'. Enter your site link url instead of 'MY SITE URL'. Enter the url of the image you noted down in Step 3 instead of 'URL OF PLACE IMAGE'. Enter the width and height of the image in pixels instead of XXX and YYY.

Save Template. See the image above where I have added it to Delhi. To see this map in action go to Google Ajax Made Easy. and click on the marker for Delhi.