Put Google Maps on Your Blog

Add a Geo-oriented Search to Your Blog


Loading...

Add a Video Search to Your Blog


Loading...

Add a Video Bar to YourBlog


Loading...
Loading...

Google Ajax Search Engine



Put Google Search on Your Blog


Loading...

Thursday, November 23, 2006

Add a Country Map to your Blog.

To add a country map to your blog first you will have 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.