Display the Google map in the div element

The following example shows how to display the Google map in the div element. Google make it easy to show the Google Map in to any web page with the help of JavaScript. The example contains a div with the specified width and height.

Demo


The following is the complete code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #mapDiv {
        width: 550px;
        height: 420px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var mapDiv = document.getElementById('mapDiv');
        var mapOptions = {
          center: new google.maps.LatLng(78, -50),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var _map = new google.maps.Map(mapDiv, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>

The example starts with the simple syntax of the HTML5 document and then in the initialize() function, example create a Google map object with the map options and display in the div.
Before implementing the JavaScript initialize() function,example load the Google Maps API by adding a script tag to the head section of your HTML. This script will download the code required to display maps on your page.

There are several options for the Google Map. See all the options:All Google MAP API options but the center, zoom level, and the map type options are required.