Add a Country Map to your Blog. ~ The Blog Doctor.
Loading...

Add a Country Map to your Blog.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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.


Technorati Tags:, , ,

0 comments:

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.