Setting Google Maps API V3 Zoom level based on screen/device width

Question

I have the following code which display 3 markers on a google map. On screen widths larger than 600px the zoom level is set to '13', which is fine. Ideally, once the screen/device width is lower than 600px I would like the zoom level to drop to '12'.

I have tried using fitBounds(), and looked at LatLngBounds, but I'm struggling to get those to work with my code. Is this simple to achieve? Any help would be grately appreciated.

My code is below:

var map;

var locations = [
  ['Location 1', 53.560410,-2.105351, 2],
  ['Location 2', 53.532154, -2.165793, 1],
  ['Location 3', 53.5386671,-2.1681325, 3]
];

function bindInfoWindow(marker, map, infowindow, strDescription) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
  });
}

function setMarkers(map, locations) {
  var infowindow =  new google.maps.InfoWindow({
    content: ""
  });


  var i, location, myLatLng, marker;

  for (i = 0; i < locations.length; i++) {
    location = locations[i];
    myLatLng = new google.maps.LatLng(location[1], location[2]);
    marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: location[0],
      zIndex: location[3]
    });

    bindInfoWindow(marker, map, infowindow, location[0]);
  }
}

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(53.545701, -2.131714),
    panControl: false,
    disableDefaultUI: true,
    zoomControl: true,
    scrollwheel: false,
    panControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  setMarkers(map, locations);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', initialize);
window.onpopstate = initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas" style="height:400px; width:100%;"></div>

Answer 1

To use fitBounds:

1. create a google.maps.LatLngBounds object
2. add all the markers positions to it
3. call map.fitBounds

code snippet:

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

var locations = [
  ['Location 1', 53.560410,-2.105351, 2],
  ['Location 2', 53.532154, -2.165793, 1],
  ['Location 3', 53.5386671,-2.1681325, 3]
];

function bindInfoWindow(marker, map, infowindow, strDescription) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
  });
}

function setMarkers(map, locations) {
  var infowindow =  new google.maps.InfoWindow({
    content: ""
  });


  var i, location, myLatLng, marker;

  for (i = 0; i < locations.length; i++) {
    location = locations[i];
    myLatLng = new google.maps.LatLng(location[1], location[2]);
    marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: location[0],
      zIndex: location[3]
    });
    bounds.extend(marker.getPosition());

    bindInfoWindow(marker, map, infowindow, location[0]);
  }
}

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(53.545701, -2.131714),
    panControl: false,
    disableDefaultUI: true,
    zoomControl: true,
    scrollwheel: false,
    panControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  setMarkers(map, locations);
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', initialize);
window.onpopstate = initialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas" style="height:400px; width:100%;"></div>