How to add Google Map with Markers in Blogger Blog? I'm just going to showing you this tutorial. Only maps are not ok for most of the viewers. Because they are now comfortable with markers. Markers are used on a map to identify points on the map. See picture below with markers.
Google Map with Markers in Blog - Add Google map in Blogger
OK. Now set your Google blogger blog with Google Markup map. Follow the steps now.
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 > 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()'>
Now Save your 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. And you are done. If you get any problem you can ask me via comment on this site.
Google Map with Markers in Blog - Add Google map in Blogger
OK. Now set your Google blogger blog with Google Markup map. Follow the steps now.
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 > 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()'>
Now Save your 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. And you are done. If you get any problem you can ask me via comment on this site.
No comments:
Post a Comment