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>
<title>Heading title</title>
<script src=""></script>
function initialize()
  var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addDomListener(window, 'load', initialize);
<div id="googleMap" style="width:600px;height:300px;"></div>

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

Contact Us

Dehradun Uttarakhand India

Other Link

About Us

Contact Us


Privacy Policy