Center map using multiple markers and google maps api

Question

currently have a map drawn with two markers using the JS below, but when the map loads it does not center correctly when the markers are on specific locations... I am fairly sure this is a simple error but cannot spot it

[var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls\[google.maps.ControlPosition.TOP_CENTER\].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: <?php echo $Lat1; ?>, lng: <?php echo $Long1; ?>}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: <?php echo $Lat2; ?>, lng: <?php echo $Long2; ?>}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);


  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  /*geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });*/

  update();
}

function update() {
  var path = \[marker1.getPosition(), marker2.getPosition()\];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path\[0\], path\[1\]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path\[0\].toString();
  document.getElementById('destination').value = path\[1\].toString()https://stackoverflow.com/editing-help;
}]

Image: http://tinypic.com/r/29q01g4/9

Answer 1

The google.maps.LatLngBounds constructor takes two google.maps.LatLng objects in a specific order: SouthWest, NorthEast corners.

LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral)

Constructs a rectangle from the points at its south-west and north-east corners.

So this is not correct (unless the markers happen to be in the correct relation to each other):

var bounds = new google.maps.LatLngBounds(
   marker1.getPosition(), 
   marker2.getPosition());
map.fitBounds(bounds);

If you want to add two arbitrary positions to a google.maps.LatLngBounds, create an empty bounds, the extend it with the two positions:

var bounds = new google.maps.LatLngBounds();
bounds.extend(marker1.getPosition());
bounds.extend(marker2.getPosition())
map.fitBounds(bounds);

proof of concept fiddle

code snippet:

 var marker1, marker2; var poly, geodesicPoly; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: { lat: 34, lng: -40.605 } }); map.controls[google.maps.ControlPosition.TOP_CENTER].push( document.getElementById('info')); marker1 = new google.maps.Marker({ map: map, draggable: true, position: { lat: 40.7127837, lng: -74.0059413 } }); marker2 = new google.maps.Marker({ map: map, draggable: true, position: { lat: 40.735657, lng: -74.1723667 } }); var bounds = new google.maps.LatLngBounds(); bounds.extend(marker1.getPosition()); bounds.extend(marker2.getPosition()) map.fitBounds(bounds); google.maps.event.addListener(marker1, 'position_changed', update); google.maps.event.addListener(marker2, 'position_changed', update); poly = new google.maps.Polyline({ strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 3, map: map, }); update(); } function update() { var path = [marker1.getPosition(), marker2.getPosition()]; poly.setPath(path); var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]); document.getElementById('heading').value = heading; document.getElementById('origin').value = path[0].toString(); document.getElementById('destination').value = path[1].toString(); } google.maps.event.addDomListener(window, "load", initMap); 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <input id="heading" /> <input id="origin" /> <input id="destination" /> <div id="map"></div>