GoogleMapsV3 Bounded Markers

Zoom set to show all markers on map

by David McClelland

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true&amp;dummy=.js"></script>
<div id="map-canvas">loading map</div>

CSS

html {
      height: 100%
  }
  body {
      height: 100%;
      margin: 0;
      padding: 0
  }
  #map-canvas {
      width:100%;
      height:100%;
  }

JavaScript

var map;
var markers = [];
var bounds = new google.maps.LatLngBounds();

var loc4 = new google.maps.LatLng(42.219015158944984,-73.03097248077393);
var loc0Name = "13:21 Tuesday, March 13 2013";
var loc1 = new google.maps.LatLng(42.67778188921072,-73.87187719345093);
var loc1Name = "14:15 Tuesday, March 13 2013";
var loc2 = new google.maps.LatLng(42.48345988848751,-73.79400730133057);
var loc2Name = "15:01 Tuesday, March 13 2013";
var loc3 = new google.maps.LatLng(42.38619069220356,-73.49111080169678);
var loc3Name = "15:58 Tuesday, March 13 2013";
var loc0 = new google.maps.LatLng(42.16359428567939,-72.8412652015686);
var loc4Name = "16:32 Tuesday, March 13 2013";
var loc5 = new google.maps.LatLng(42.15933157601718,-72.4658203125);
var loc5Name = "16:56 Tuesday, March 13 2013";
var loc6 = new google.maps.LatLng(42.14980306359454,-72.12995409965515);
var loc6Name = "17:15 Tuesday, March 13 2013";
var loc7 = new google.maps.LatLng(42.17676233561517,-71.9066333770752);
var loc7Name = "18:22 Tuesday, March 13 2013";
var loc8 = new google.maps.LatLng(42.21481180783805,-71.65708065032959);
var loc8Name = "18:56 Tuesday, March 13 2013";
var loc9 = new google.maps.LatLng(42.12323018703465,-71.4955472946167);
var loc9Name = "19:16 Tuesday, March 13 2013";
var loc10 = new google.maps.LatLng(42.0349426316488,-71.23899936676025);
var loc10Name = "20:11 Tuesday, March 13 2013";
    
var locationArray = [loc0,loc1,loc2,loc3,loc4,loc5,loc6,loc7,loc8,loc9,loc10];
var locationNames = [loc0Name,loc1Name,loc2Name,loc3Name,loc4Name,loc5Name,loc6Name,loc7Name,loc8Name,loc9Name,loc10Name];
    initialize();

function bound(value, opt_min, opt_max) {
  if (opt_min != null) value = Math.max(value, opt_min);
  if (opt_max != null) value = Math.min(value, opt_max);
  return value;
}

function initialize() {
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

   ...