Generic Google Map Example with Markers

by Jose Gómez

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}

JavaScript

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(75, 20),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  // Define the LatLng coordinates for the polygon's path.
  var geometry = [
    [
      {lat: 70, lng: -10},
      {lat: 70, lng: 60},
      {lat: 69, lng: 60},
      {lat: 69, lng: -10},
      {lat: 70, lng: -10}
    ],
    [
      {lat: 71, lng: -10},
      {lat: 71, lng: 60},
      {lat: 70, lng: 60},
      {lat: 70, lng: -10},
      {lat: 71, lng: -10}
    ],
    [
      {lat: 72, lng: -10},
      {lat: 72, lng: 60},
      {lat: 71, lng: 60},
      {lat: 71, lng: -10},
      {lat: 72, lng: -10}
    ],
    [
      {lat: 73, lng: -10},
      {lat: 73, lng: 60},
      {lat: 72, lng: 60},
      {lat: 72, lng: -10},
      {lat: 73, lng: -10}
    ],
    [
      {lat: 74, lng: -10},
      {lat: 74, lng: 60},
      {lat: 73, lng: 60},
      {lat: 73, lng: -10},
      {lat: 74, lng: -10}
    ],
    [
      {lat: 75, lng: -10},
      {lat: 75, lng: 60},
      {lat: 74, lng: 60},
      {lat: 74, lng: -10},
      {lat: 75, lng: -10}
    ],
    [
      {lat: 76, lng: -10},
      {lat: 76, lng: 60},
      {lat: 75, lng: 60},
      {lat: 75, lng: -10},
      {lat: 76, lng: -10}
    ],
    [
      {lat: 77, lng: -10},
      {lat: 77, lng: 60},
      {lat: 76, lng: 60},
      {lat: 76, lng: -10},
      {lat: 77, lng: -10}
    ],
    [
      {lat: 78, lng: -10},
      {lat: 78, lng: 60},
      {lat: 77, lng: 60},
      {lat: 77, lng: -10},
      {lat: 78, lng: -10}
    ],
    [
      {lat: 79, lng: -10},
      {lat: 79, lng: 60},
      {lat: 78, lng: 60},
      {lat: 78, lng: -10},
      {lat: 79, lng: -10}
    ]
  ];
  
  for (var g = 0; g < geometry.length; g++) {
    // Construct the...