Autofit google maps multiple markers using place id

Question

I am using google places autocomplete. I have placeIds and successfully showing it using google maps API. But all the markers are not visible. I have to zoom it to see all marker. After adjusting map with zoom, I can see all the markers. How can I autofit all markers on screen?

My code:

var placeid_json = <?php echo $placeids; ?>;

var openedInfoWindow = null;
 var bounds = new google.maps.LatLngBounds();
function initialize() {
    var latitude = 21.1202644,
        longitude = 79.0418986,
        radius = 8000,

    center = new google.maps.LatLng(latitude, longitude),
    mapOptions = {
        center: center,
        zoom: 10,

        scrollwheel: false
    };

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



   setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {

var json = placeid_json;
for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i];
    createMarker(data, map);
    }
}
function createMarker(data, map) {
            var service = new google.maps.places.PlacesService(map);
        service.getDetails({
            placeId: data.placeid
        }, function (result, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            var marker = new google.maps.Marker({
                map: map,
                place: {
                    placeId: data.placeid,
                    location: result.geometry.location
                }
                //position: result.geometry.location
            });
            infoBox(map, marker, data, result);
        });

}
function infoBox(map, marker, data, result) {
    var infoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, "click", function (e) {

        infoWindow.setContent(data.content);
        infoWindow.open(map, marker);
    });

    (function (marker, data) {

    google.maps.event.addListener(marker, "click", function (e) {

        infoWindow.setContent(data.content+"<br>"+result.name);
        infoWindow.open(map, marker);
    });
})(marker, data);
}


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

Answer 1

1. make your map variable global (like your existing bounds object is)

var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
var map;
function initialize() {
  var latitude = 21.1202644, longitude = 79.0418986, radius = 8000,
  center = new google.maps.LatLng(latitude, longitude), mapOptions = {
    center: center,
    zoom: 10,
    scrollwheel: false
  };
  // initialize the global map variable
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

2. extend the bounds and call map.fitBounds inside the callback function for the details service.

function createMarker(data, map) {
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: data.placeid
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: data.placeid,
        location: result.geometry.location
      }
      //position: result.geometry.location
    });
    bounds.extend(result.geometry.location);
    map.fitBounds(bounds);
    infoBox(map, marker, data, result);
  });
}

proof of concept fiddle

code snippet:

var placeid_json = [{
  "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI',
  "content": "   1   "
}, {
  "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM',
  "content": "   2   "
}, {
  "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs',
  "content": "   3   "
}];
var openedInfoWindow = null;
var bounds = new google.maps.LatLngBounds();
var map;

function initialize() {
  var latitude = 21.1202644,
    longitude = 79.0418986,
    radius = 8000,

    center = new google.maps.LatLng(latitude, longitude),
    mapOptions = {
      center: center,
      zoom: 10,

      scrollwheel: false
    };

  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {

  var json = placeid_json;
  for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i];
    createMarker(data, map);
  }
}

function createMarker(data, map) {
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: data.placeid
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: data.placeid,
        location: result.geometry.location
      }
    });
    bounds.extend(result.geometry.location);
    map.fitBounds(bounds);
    infoBox(map, marker, data, result);
  });
}

function infoBox(map, marker, data, result) {
  var infoWindow = new google.maps.InfoWindow();

  google.maps.event.addListener(marker, "click", function(e) {

    infoWindow.setContent(data.content);
    infoWindow.open(map, marker);
  });

  (function(marker, data) {

    google.maps.event.addListener(marker, "click", function(e) {

      infoWindow.setContent(data.content + "<br>" + result.name);
      infoWindow.open(map, marker);
    });
  })(marker, data);
}


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

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Answer 2

Create an empty LatLngBounds object.

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

For each marker, get its position.

var position = marker.getPosition();

Extend the bounds to include that position.

bounds.extend(position);

After doing this for all the markers, make the map fit those bounds.

map.fitBounds(bounds);