var map;
var infowindow = new google.maps.InfoWindow();
var infoArray = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
map.data.addListener('click', function(e) { // if marker is clicked, build info window
document.getElementById("status").innerHTML = "";
for (var i = 0; i < infoArray.length; i++) {
if (infoArray[i].position.equals(e.feature.getGeometry().get())) {
infoArray[i].clicked++;
// break;
}
document.getElementById("status").innerHTML += "[" + i + "]:" + infoArray[i].clicked + "<br>";
}
var myId = "Id";
var myName = "name";
var myAddr = "address";
var myCity = "city";
var boxText = "<div id='infoWindow'>" + myName + "<br />" + myAddr + ", " + myCity + "<br>" + e.feature.getProperty("markerCnt");
if (e.feature.getProperty("letter")) {
boxText += "<br>" + e.feature.getProperty("letter");
}
boxText += "<br>" + e.feature.getGeometry().get().toUrlValue(6);
boxText += "</div>";
infowindow.setContent("<div class='infoWindow'>" + boxText + "</div>");
infowindow.setPosition(e.feature.getGeometry().get());
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -30)
});
infowindow.open(map); // open the info window
});
var markerCnt = 0;
var bounds = new google.maps.LatLngBounds();
google.maps.event.addListener(map.data, 'addfeature', // triggered for each feature in the geoJson object
function(e) {
if (e.feature.getGeometry().getType() === 'Point') // DHS maps will be only points
{
infoArray[markerCnt] = {
position: e.feature.getGeometry().get(),
clicked: 0
};
/* var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: "" + markerCnt, // e.feature.getProperty('name'), // set the market tilte to name property value from geoJson
map: map
}); */
e.feature.setProperty("markerCnt", markerCnt);
markerCnt++;
bounds.extend(e.feature.getGeometry().get()); // make sure to show this point on the map
map.fitBounds(bounds);
map.setCenter(e.feature.getGeometry().get()); // center the map around the points displayed
document.getElementById('info').innerHTML = markerCnt;
}
});
map.data.addGeoJson(GgeoJson);
}
google.maps.event.addDomListener(window, 'load', initMap);
var GgeoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"letter": "USA",
"color": "blue",
"rank": "1",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [-105.01621,
39.57422
]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.61, -22.14]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [122.38, -21.73]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.06, -21.69]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [119.66, -22.22]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [119.00, -23.40]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [118.65, -24.76]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [118.43, -26.07]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [118.78, -27.56]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [119.22, -28.57]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [120.23, -29.49]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.77, -29.87]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.57, -29.64]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [124.45, -29.03]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [124.71, -27.95]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [124.80, -26.70]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [124.80, -25.60]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.61, -25.64]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [122.56, -25.64]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.72, -25.72]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.81, -26.62]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.86, -26.98]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [122.60, -26.90]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.57, -27.05]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.57, -27.68]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.35, -28.18]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [122.51, -28.38]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.77, -28.26]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.02, -27.91]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [120.49, -27.21]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [120.14, -26.50]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [120.10, -25.64]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [120.27, -24.52]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [120.67, -23.68]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [121.72, -23.32]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [122.43, -23.48]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.04, -24.04]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [124.54, -24.28]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [124.58, -23.20]
}
}, {
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.61, -22.14]
}
}, {
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Point",
"coordinates": [128.84, -25.76]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.18, -25.60]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.88, -25.52]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.96, -25.52]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.70, -25.60]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.26, -25.79]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [126.60, -26.11]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [126.16, -26.78]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [126.12, -27.68]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [126.21, -28.42]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [126.69, -29.49]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.74, -29.80]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.80, -29.72]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [129.41, -29.03]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [129.72, -27.95]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [129.68, -27.21]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [129.33, -26.23]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.84, -25.76]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.45, -27.44]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.32, -26.94]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.70, -26.82]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.35, -27.05]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.17, -27.80]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [127.57, -28.22]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.10, -28.42]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.49, -27.80]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [128.45, -27.44]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [131.87, -25.76]
}
}, {
"type": "Feature",
"properties": {
"letter": "o"
},
"geometry": {
"type": "Point",
"coordinates": [131.35, -26.07]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [130.95, -26.78]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [130.82, -27.64]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [130.86, -28.53]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [131.26, -29.22]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [131.92, -29.76]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [132.45, -29.87]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [133.06, -29.76]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [133.72, -29.34]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [134.07, -28.80]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [134.20, -27.91]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [134.07, -27.21]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [133.81, -26.31]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [133.37, -25.83]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [132.71, -25.64]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [131.87, -25.76]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [133.15, -27.17]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [132.71, -26.86]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [132.09, -26.90]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [131.74, -27.56]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [131.79, -28.26]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [132.36, -28.45]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [132.93, -28.34]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [133.15, -27.76]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [133.15, -27.17]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [138.12, -25.04]
}
}, {
"type": "Feature",
"properties": {
"letter": "g"
},
"geometry": {
"type": "Point",
"coordinates": [136.84, -25.16]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [135.96, -25.36]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [135.26, -25.99]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [135, -26.90]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [135.04, -27.91]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [135.26, -28.88]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [136.05, -29.45]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [137.02, -29.49]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [137.81, -29.49]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [137.94, -29.99]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [137.90, -31.20]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [137.85, -32.24]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [136.88, -32.69]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [136.45, -32.36]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [136.27, -31.80]
}
}]
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="info"></div>
<div id="map"></div>
<div id="status"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
請提供[MCVE]演示這個問題。 – geocodezip