Blogging is one of the simple, easy & an interesting way to share your ideas, technology, tricks, tips & information with the world. Blogger.com provides free blogs & templates. Now you can easily make your free blog with the help of blogger. There are millions of people who are writing blogs & are also liked by the readers. This blog - Wide Info Blog provides blogger tips, tricks & tutorials. Previously we have discussed - "How to Disable Comments from all Posts & Pages in Blogger" .
Now, In this article we will discuss - How to Add a Google Map to your Website / Blog with Simple HTML Only. Now,
Now, In this article we will discuss - How to Add a Google Map to your Website / Blog with Simple HTML Only. Now,
Steps for Adding Google Maps to your Website / Blog:
Step - 1. Login into your blogger account & select the blog to which you want to add google map. Generally map is added to pages, but you can also add to posts.
Step - 2. Now go to your page to which you want to add google map & click "HTML" tab. Now Copy & paste the below code & publish your page - as shown in the screenshot given below.
Code :
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(28.613939,77.209021);
function initialize()
{
var mapProp = {
center: myCenter,
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Note : you can customize this google map according to your requirements.
1. Change the latitude & longitude according to your location by replacing "LatLng(28.613939,77.209021)". Find your latitude, longitude Click Here
2. Change zoom level. Find "zoom:10," in above code & change according to requirement.
3. Change MAP Type. Find "MapTypeId.ROADMAP" default is "ROADMAP" but you can change this too
- SATELLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
