We have been given the following code to show a specific Google Maps API infoWindow when the map is opened:
https://jsfiddle.net/e26qyzxm/
The thing is that the zoom level was hard-coded in the code to:
map.setZoom(16);
that works fine when using the sample markers as shown.
However, we need the zoom level to be dynamically set so when real-world markers are loaded from the backend, the zoom level is set to just above the level at which the marker would be out of its cluster if any. Otherwise, that zoom level of 16 may be too low and the infoWindow may not show because the specific marker is still in a cluster.
Can anyone suggest an amendment to the code to do that?
HTML:
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
CSS:
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Javascript:
var MrkId = 62440;
var markersC = [];
var markersA = [];
var infowindow;
var map;
var markerCluster;
var points = [
['Point 1', 'adresse 1 ', 46.613317, 2.249830, 62437],
['Point 2', 'adresse 2 ', 46.713317, 2.249830, 62438],
['Point 3', 'adresse 3 ', 46.613317, 2.349830, 62439],
['Point 4', 'adresse 4 ', 46.713317, 2.449830, 62440],
['Point 5', 'adresse 5 ', 46.613317, 2.449830, 62441],
['Point 1', 'adresse 1 ', 46.413317, 2.249830, 62442],
['Point 2', 'adresse 2 ', 46.513317, 2.249830, 62443],
['Point 3', 'adresse 3 ', 46.513317, 2.349830, 62444],
['Point 4', 'adresse 4 ', 46.413317, 2.449830, 62445],
['Point 5', 'adresse 5 ', 46.513317, 2.449830, 62446],
];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 46.613317,
lng: 2.349830
},
zoom: 9
});
infowindow = new google.maps.InfoWindow();
setMarkers();
}
function MkrClick(Mrk, Cnt, point) {
var contentString = '<div class="marker-infowindow">' + '<h2>' + point[0] + '</h1>' + '<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';
Mrk.addListener('click', function() {
infowindow.setContent(Cnt);
infowindow.open(map, Mrk);
});
}
function setMarkers() {
console.log("setMarkers")
for (var i = 0; i < points.length; i++) {
var point = points[i];
var contentString = '<div class="marker-infowindow">' + '<h2>' + point[0] + '</h1>' + '<div><a target="_blank" href="https://tutoandco.colas-delmas.fr/developpement/inserer-carte-google-maps-wordpress/?utm_source=jsfiddle&utm_medium=website">Voir le tuto complet</a></div></div>';
var marker = new google.maps.Marker({
position: {
lat: point[2],
lng: point[3]
},
map: map,
title: point[0],
loc_id: point[4],
loc_txt: contentString,
});
markersA.push(marker);
markersC.push(marker);
MkrClick(marker, contentString, point);
if (i == (points.length - 1)) {
// Add a marker clusterer to manage the markers.
markerCluster = new MarkerClusterer(map, markersC, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
if (MrkId != 0) {
ShowInfo(MrkId)
if (MrkId * 1 == point[4] * 1) {
console.log("MrkId=" + MrkId);
}
}
}
}
}
function ShowInfo(MrkIdSel) {
var IdxFound = -1;
for (var a = 0; a < markersC.length; a++) {
var McLoc = markersC[a].loc_id;
var McLocA = markersA[a].loc_id;
if (McLoc == MrkIdSel) {
IdxFound = a;
a = (markersC.length - 1)
}
if (a == (markersC.length - 1)) {
var bounds = new google.maps.LatLngBounds(markersC[IdxFound].position);
map.fitBounds(bounds);
setTimeout(function() {
map.setZoom(16);
google.maps.event.trigger(markersA[IdxFound], "click", {});
}, 125);
}
}
}
function isMarkerClustered(Marker) {
var clusters = markerCluster.clusters_;
var Pos = 0;
console.log("isMarkerClustered clusters.length=" + clusters.length)
for (var i = 0; i < clusters.length; i++) {
var Cmarkers = clusters[i].getMarkers();
for (var m = 0; m < Cmarkers.length; m++) {
if (Cmarkers[m] === Marker) {
Pos = clusters[i].getCenter()
}
if (i == (clusters.length - 1)) {
if (m == (Cmarkers.length - 1)) {
if (Pos != 0) {
Pos = Marker.position
}
var Info2 = new google.maps.InfoWindow({
//position: markersC[a].position,
position: Pos,
content: Marker.loc_txt,
}).open(map);
}
}
}
}
}
UPDATE 1:
I guess an alternative would be to turn off clustering and hard code the zoom to say 16. Then if the user zooms out, hide the infoWindow and re-enable the clustering. If anyone can suggest an amendment to the code to do that I'd be appreciative.
