Google Maps Bounding Box

googlemaps.js

var markers = [];
var map;
var locations;
var latlngbounds;
var infoWindows = [];
var lastMarker;

function initialize() {
  locations = $('#map-canvas').data('locations')
  var mapOptions = {
    center: new google.maps.LatLng(53.743317, -0.331004),
    zoom: 8,
    scrollwheel: false
  };

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

  var latLngs = [];
  $.each(locations, function(index, value){
    var myLatLng = new google.maps.LatLng(value.latitude, value.longitude);
    latLngs[index] = myLatLng;
    var contentString = '<div id="content">' + value.info_window + '</div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });
    var image = "/assets/map_pin--" + value.model + ".png";


    if(value.model == 'location') {
      index += 1000
    }

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image,
      title: value.name,
      zIndex: index,
      optimized: false
    });

    google.maps.event.addListener(marker, 'click', function() {
      closeInfoWindow();
      // remove class from previously active location
      if(lastMarker != null) {
        $('#location-' + lastMarker).removeClass('active');
      }

      lastMarker = markers.indexOf(marker);
      $('#location-' + lastMarker).toggleClass('active');
      map.panTo(marker.getPosition());
      //pan and then wait 2 secs then zoom and open info window
      window.setTimeout(function() {
        map.setZoom(15);
        infowindow.open(map,marker);
      }, 1000);
    });

    google.maps.event.addListener(map, 'click', function(event){
      this.setOptions({scrollwheel:true});
    });

    google.maps.event.addListener(infowindow, 'closeclick', function(){
      map.fitBounds(latlngbounds);
      $('#location-' + lastMarker).toggleClass('active');
    });

    //add info window and marker to respective arrays
    infoWindows.push(infowindow);
    markers.push(marker);

  });

  latlngbounds = new google.maps.LatLngBounds();
  $.each(latLngs, function(index, n){
    latlngbounds.extend(n);
  });
  map.setCenter(latlngbounds.getCenter());
  map.fitBounds(latlngbounds);

  google.maps.event.addListener(map, 'zoom_changed', function() {
    closeInfoWindow();
  });

  google.maps.event.addListenerOnce(map, 'idle', function(){
    if ( $('.current-centre').length > 0 ) {
      $('.current-centre').click();
    }

    if ( $('.click-me').length > 0 ) {
      $('.click-me').click();
    }
  });
}

function closeInfoWindow() {
  if(lastMarker != null) {
    infoWindows[lastMarker].close();
  }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBof5QVRbjvfoSC77KO6HQ1f4WiOIZwo4U&sensor=false&callback=initialize';
  document.body.appendChild(script);
}

// The function to trigger the marker click, 'id' is the reference index to the 'markers' array.
function locationClick(id){
  google.maps.event.trigger(markers[id], 'click');
}

window.onload = loadScript;