MarkerCluster
HTML
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Marker Example</title>
<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
<script type="text/javascript" src="mark.js"></script>
<script>
</script>
<style>
#map {
width: 500px;
height: 500px;
border: thin solid black;
}
</style>
</head>
<body onload="loadMap();">
<h1>Google Maps Marker Example</h1>
<div id="map"></div>
</body>
</html>
JavaScript
var map;
function loadMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -41.75,
lng: 172.75
},
zoom: 4
});
addMarkers();
}
var WeatherStations = [{
"stn": 719460,
"wban": 99999,
"StationName": "FORT SIMPSON",
"FIPS": "CA",
"Latitude": 61.759998322,
"Longitude": -121.2369995,
"Elevation_m": 169,
"NOAAReadings": 14952
}, {
"stn": 935970,
"wban": 99999,
"StationName": "CAPE CAMPBELL AWS",
"FIPS": "NZ",
"Latitude": -41.71699905,
"Longitude": 174.26699829,
"Elevation_m": 32,
"NOAAReadings": 12174
},
{
"stn": 934360,
"wban": 99999,
"StationName": "WELLINGTON INTL",
"FIPS": "NZ",
"Latitude": -41.32699966,
"Longitude": 174.80499268,
"Elevation_m": 12,
"NOAAReadings": 9914
}, {
"stn": 937090,
"wban": 99999,
"StationName": "HAAST AWS",
"FIPS": "NZ",
"Latitude": -43.86700058,
"Longitude": 169,
"Elevation_m": 5,
"NOAAReadings": 14371
},
{
"stn": 935270,
"wban": 99999,
"StationName": "FAREWELL SPIT AWS",
"FIPS": "NZ",
"Latitude": -40.54999924,
"Longitude": 173,
"Elevation_m": 3,
"NOAAReadings": 11575
}, {
"stn": 935460,
"wban": 99999,
"StationName": "NELSON AERODROME AWS",
"FIPS": "NZ",
"Latitude": -41.29999924,
"Longitude": 173.19999695,
"Elevation_m": 6,
"NOAAReadings": 10557
},
{
"stn": 937800,
"wban": 99999,
"StationName": "CHRISTCHURCH INTL",
"FIPS": "NZ",
"Latitude": -43.48899841,
"Longitude": 172.53199768,
"Elevation_m": 38,
"NOAAReadings": 14933
}, {
"stn": 938050,
"wban":...