JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="mapCanvas"></div>
CSS
#mapCanvas{width:500px;height:300px;}
JavaScript
var markers = [];
var map;
function initialize() {
var myOptions = {
center: new google.maps.LatLng(45.4555729, 9.169236),
zoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
mapTypeControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
};
map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
// adding 3 markers, all visible false at first
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(45.3555629, 9.169236),
map: map,
visible: false
}));
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(45.4555529, 9.169236),
map: map,
visible: false
}));
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(45.5555429, 9.169236),
map: map,
visible: false
}));
// showing 2 out of 3 markers
showVisible();
}
function showVisible() {
var bounds = new google.maps.LatLngBounds();
// showing only 2 visible 1 hidden (because of markers.length-1)
for(var i=0; i<markers.length-1; i++) {
markers[i].setVisible(true);
// extending bounds to contain this visible marker position
bounds.extend( markers[i].getPosition() );
}
// setting new bounds to visible markers of 2
map.fitBounds(bounds);
}
initialize();