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.
You are here: Home > Google Map > Google Map with Markers in Blog.
Google Map with Markers in Blog.

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

Posted by Vin
What have you to say?
8 VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.
EMail this post to a friend?


Filed Under :
Labels: Google Map |Bookmark This Post
Skip to top of post.
YOUR COMMENTS
Buy Vin a Beer :-) if you liked this post.
Search Blog Before Commenting
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.
8 comments:
Nice I found the site through google google
Thanks for giving a step by step instruction to add google markers in our blog but i am not able to modify the template code i have already tried more than 4 times but no solution of this problem.
i love google (: lol :D
however google doesn't have a complete map for my country...
Very nice, thanks for the information.
I think more easily, we do edit on the google map, then we'll take the link in the form of an iframe?
like this for example
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=208786180823750110326.000479c1b27bd861a4eac&ll=-6.886933,107.61795&spn=0.030719,0.038581&output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=208786180823750110326.000479c1b27bd861a4eac&ll=-6.886933,107.61795&spn=0.030719,0.038581&source=embed" style="color:#0000FF;text-align:left">My Address Home</a> in a larger map</small>
After you consultancy my blog is get well very fast.Thanks for so profession consultancy.
Nice blog with nice post. Keep writing for the same.
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?