Generic Google Map Example with Markers

by bartek

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&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

var map;
google.maps.event.addDomListener(window, "load", function() {
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(47.702893, -122.350051),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var triangleCoords = [{
    lng: -122.350051,
    lat: 47.702893
  }, {
    lng: -122.344774,
    lat: 47.702877
  }, {
    lng: -122.344777,
    lat: 47.70324
  }, {
    lng: -122.341982,
    lat: 47.703234
  }, {
    lng: -122.341959,
    lat: 47.701421
  }, {
    lng: -122.339749,
    lat: 47.701416
  }, {
    lng: -122.339704,
    lat: 47.69776
  }, {
    lng: -122.341913,
    lat: 47.697797
  }, {
    lng: -122.341905,
    lat: 47.697071
  }, {
    lng: -122.344576,
    lat: 47.697084
  }, {
    lng: -122.344609,
    lat: 47.697807
  }, {
    lng: -122.349999,
    lat: 47.697822
  }, {
    lng: -122.350051,
    lat: 47.702893
  }];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
  
  var blueCoords = [{
    lng: -122.350616,
    lat: 47.701263
  }, {
    lng: -122.350616,
    lat: 47.702637
  }, {
    lng: -122.349243,
    lat: 47.702637
  }, {
    lng: -122.349243,
    lat: 47.701263
  }];
  var blue = new google.maps.Polygon({
    paths: blueCoords,
    strokeColor: '#66ffcc',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#66ffcc',
    fillOpacity: 0.35
  }); 
  //blue.setMap(map);
  
  var blueCoords1 = [{
    lng: -122.341003,
    lat: 47.69989
  }, {
    lng: -122.341003,
    lat: 47.701263
  }, {
    lng: -122.33963,
    lat: 47.701263
  }, {
    lng: -122.33963,
    lat: 47.69989
  }];
  var blue1 = new google.maps.Polygon({
    paths: blueCoords1,
    strokeColor: '#66ff55',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#66ff55',
   ...