Add Interactive Google Map using JavaScript API v3

This article will guide you to add Google Map to your webpage using JavaScript API v3.

Adding a Simple Google Map

Create a div called myMap in your HTML page where you want to display the map. Assign the height and width of the div in your CSS file or in the same page in side style tag.
  

<div id="myMap"></div>

CSS Code

<style>
#myMap {
   height: 350px;
   width: 680px;
}
</style>

JavaScript Code

First include Include API file from Google. Then write the following code to display the map. It will generate and display the map in myMap div.
.  

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[YOUR KEY]">
</script>
<script>
  var map;
  function initialize() {
     var mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(20.1979279,85.8179039)
     };
     map = new google.maps.Map(document.getElementById('myMap'),mapOptions);
  }
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Output

Some useful Google Map Options

1. center: This is a required field and it takes longitude and latitude as input.
Example: center: new google.maps.LatLng(20.1979279,85.8179039)
 
2. disableDoubleClickZoom: This will enable or disable zoom and center the map on double clicking on map. By default it is false.
Example: disableDoubleClickZoom: true,

3. draggable: It is used to enable or disable dragging the map. by default it is true.
Example: draggable: false,

4. draggableCursor: This will change the cursor when you mouse over the map.   
Example: draggableCursor: 'move',

5. draggingCursor: This will change the cursor when you drag or move the map.   
Example: draggingCursor: 'wait',

6. keyboardShortcuts: It is used to enable or disable keyboard shortcuts. By default  keyboard shortcuts are enabled.   
Example: keyboardShortcuts: false,

7. mapTypeControl: It is used to enable or disable to change map type like HYBRID, ROADMAP, SATELLITE or TERRAIN. By default  mapTypeControl is enabled.   
Example: mapTypeControl: false,

8. mapTypeId: It is used to set map type. The default is ROADMAP and the other options are HYBRID, SATELLITE and TERRAIN.   
Example: mapTypeId: google.maps.MapTypeId.HYBRID,

9. maxZoom: It is used to set maximum zoom level will be display on the map.   
Example: maxZoom: 12,

10. minZoom: It is used to set minimum zoom level will be display on the map.   
Example: maxZoom: 3,

11. zoom: It is used to set the zoom level on map load. This is a required option.   
Example: zoom: 4,

Adding Custom Marker on Google Map.