How to stop Google Maps from centering on inserted Info Windows - google-maps-api-3

Question

I have a map which I am populating with markers and info windows dynamically. The issue I'm having is that after populating the map, it re-centers automatically on the info windows (but not very well).
It also appears to be centering a few times, and I think it tries to center on the last x added ones (it's not the last, but it's definitely not them all either).
Why this is of particular importance to me is I am populating Info Windows for two cities, and doing so city-by-city, and the map always ends up off-center of the second city (and all its info windows).
I made a fiddle to show the behavior. Adding pins does not re-center, but adding info windows does. (they populate SE of the starting position)
javascript:
var map;
var markers;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -30,
lng: 150
},
zoom: 8
});
markers = [];
}
function fire1() {
for (let i = 0; i < 10; i++) {
let position = {
lat: -34.397 + Math.random() - 0.5,
lng: 150.644 + Math.random() - 0.5
}
let point = new window.google.maps.InfoWindow({
position: position,
content: `<span>${i}</span>`
})
point.open(map)
}
}

Answer 1

To prevent opening an InfoWindow from changing the map's center, set the disableAutoPan property to true. From the documentation:
disableAutoPan
Type: boolean optional
Disable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.
let point = new window.google.maps.InfoWindow({
position: position,
content: `<span>${i}</span>`,
disableAutoPan: true
})
proof of concept fiddle
Related questions:
Google Maps API - maps.setCenter doesn't seem to be centering to users position
Center google map on kml, not location
code snippet:
var map;
var markers;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -30,
lng: 150
},
zoom: 8
});
markers = [];
}
function fire1() {
for (let i = 0; i < 10; i++) {
var marker = new google.maps.Marker({
position: {
lat: -34.397 + Math.random() - 0.5,
lng: 150.644 + Math.random() - 0.5
},
map: map
});
markers.push(marker);
}
}
function fire2() {
for (let i = 0; i < 10; i++) {
let position = {
lat: -34.397 + Math.random() - 0.5,
lng: 150.644 + Math.random() - 0.5
}
let point = new window.google.maps.InfoWindow({
position: position,
content: `<span>${i}</span>`,
disableAutoPan: true
})
point.open(map)
}
}
#map {
height: 100%;
}
.explanation {
position: absolute;
z-index: 1000;
left: 200px;
top: 20px;
background: white;
padding: 10px;
margin-right: 70px;
border: 2px #666 inset;
}
.fire {
position: absolute;
z-index: 1000;
left: 20px;
background: red;
color: white;
padding: 10px;
}
#fire1 {
top: 60px;
}
#fire2 {
top: 100px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<button onclick="fire1()" id="fire1" class="fire">
Insert Markers
</button>
<button onclick="fire2()" id="fire2" class="fire">
Insert InfoWindows
</button>
<div class="explanation">When I add markers the map center remains still; but when I add info windows, the map seems to try and center them (badly) - how to I keep the map still?
</div>