Google Maps Tutorial For Beginner
Google Maps is a web mapping service developed by Google. Like many other Google web applications, Google Maps uses JavaScript extensively. Google Maps API allow to display maps on your website or blog. It is a free web mapping service.
Types of Google Maps
(1) Roadmap (normal, default 2D map)
(2) Satellite (photographic map)
(3) Hybrid (photographic map + roads and city names)
(4) Terrain (map with mountains, rivers, etc.)
Google Maps Controls
(1) Zoom
(2) Pan
(3) MapType
(4) Street View
(5) Scale
(6) Rotate
(7) Overview Map
Steps to Create Google Maps
(1) Create an HTML Page
(2) Load the Google API
(3) Create a Map Container
(4) Map Options
(5) Create a Map Object
(6) Event Listener to Load the Map
<!DOCTYPE html>
<html>
<head>
<title>Heading title</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:600px;height:300px;"></div>
<br>
</body>
</html>
Google Maps Markers
Google Maps provides various overlays-
(1) Markers
(2) Polylines
(3) Polygons
(4) Circle and rectangle
(5) Info window
(6) Symbols
We can draw things and object on the map and bind them to a required latitude and longitude.
