英文:
Why do Google Maps markers using MarkerClusterer not show up on the map if I rename the map variable?
问题
I want to use the Google Maps API on my webpage. Also, I want to cluster markers using [MarkerClusterer][1], following [this][2] tutorial.
Before renaming
The following code works as expected:
Note: I removed the API key.
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/markerclusterer@2.0.3";
function initMap() {
const map = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(map, marker);
});
return marker;
});
new MarkerClusterer({ markers, map });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap" defer></script>
</body>
</html>
This is the output:
[![Screenshot 1][3]][3]
After renaming
Now, if I just rename the map variable from this...
const map = new google.maps.Map(document.getElementById("googleMapsDesktop"), {...});
...to this...
const mapDesktop = new google.maps.Map(document.getElementById("googleMapsDesktop"), {...});
...and update the code, the markers don't show on the map.
The following code doesn't work (i.e., the markers don't show on the map):
Note: I removed the API key.
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/markerclusterer@2.0.3";
function initMap() {
const mapDesktop = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(mapDesktop, marker);
});
return marker;
});
new MarkerClusterer({ markers, mapDesktop });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
<details>
<summary>英文:</summary>
I want to use the Google Maps API on my webpage. Also, I want to cluster markers using [`MarkerClusterer`][1], following [this][2] tutorial.
## Before renaming
The following code works as expected:
*Note: I removed the API key.*
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/markerclusterer@2.0.3";
function initMap() {
const map = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(map, marker);
});
return marker;
});
new MarkerClusterer({ markers, map });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap" defer></script>
</body>
</html>
<!-- end snippet -->
This is the output:
[![Screenshot 1][3]][3]
<br>
## After renaming
**Now, if I just rename the `map` variable from this...**
const map = new google.maps.Map(document.getElementById("googleMapsDesktop"), {...});
**...to this...**
const mapDesktop = new google.maps.Map(document.getElementById("googleMapsDesktop"), {...});
**...and update the code, the markers don't show on the map.**
The following code doesn't work (i.e., the markers don't show on the map):
*Note: I removed the API key.*
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/markerclusterer@2.0.3";
function initMap() {
const mapDesktop = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(mapDesktop, marker);
});
return marker;
});
new MarkerClusterer({ markers, mapDesktop });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap" defer></script>
</body>
</html>
<!-- end snippet -->
This is the output:
[![Screenshot 2][4]][4]
Also, the console doesn't show any errors related to the Google Maps API or MarkerClusterer.
What am I missing?
[1]: https://github.com/googlemaps/js-markerclusterer
[2]: https://developers.google.com/maps/documentation/javascript/marker-clustering
[3]: https://i.stack.imgur.com/KMN0G.png
[4]: https://i.stack.imgur.com/uN95w.png
</details>
# 答案1
**得分**: 1
I found the issue, with the help of this [closed issue](https://github.com/googlemaps/js-markerclusterer/issues/418) which is somehow related.
When creating the cluster with `new MarkerClusterer({ markers, mapX });` it will fail, but using `new MarkerClusterer({ markers, map: mapX });` will work fine.
If you want to be on the safe side, maybe the best option is to use:
`new MarkerClusterer({ markers: markers, map: mapX });`
Working code snippet below.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/markerclusterer@2.0.3";
function initMap() {
const mapX = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(mapX, marker);
});
return marker;
});
new MarkerClusterer({ markers: markers, map: mapX });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" defer></script>
</body>
</html>
<!-- end snippet -->
<details>
<summary>英文:</summary>
OK I found the issue, with the help of this [closed issue](https://github.com/googlemaps/js-markerclusterer/issues/418) which is somehow related.
When creating the cluster with `new MarkerClusterer({ markers, mapX });` it will fail, but using `new MarkerClusterer({ markers, map: mapX });` will work fine.
If you want to be on the safe side, maybe the best option is to use:
`new MarkerClusterer({ markers: markers, map: mapX });`
Working code snippet below.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<html>
<head>
<title>Marker Clustering</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style>
#googleMapsDesktop {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMapsDesktop"></div>
<script type="module">
import { MarkerClusterer } from "https://cdn.skypack.dev/@googlemaps/markerclusterer@2.0.3";
function initMap() {
const mapX = new google.maps.Map(document.getElementById("googleMapsDesktop"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const markers = locations.map((position, i) => {
const label = labels[i % labels.length];
const marker = new google.maps.Marker({
position,
label,
});
marker.addListener("click", () => {
infoWindow.setContent(label);
infoWindow.open(mapX, marker);
});
return marker;
});
new MarkerClusterer({ markers: markers, map: mapX });
}
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" defer></script>
</body>
</html>
<!-- end snippet -->
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论