programplug Logo




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.







Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy