我使用Google Maps JavaScript API通过加载geoJSON数据在地图上创建标记。每个功能都会创建一个标记,每个标记都有一个打开InfoWindow的Click事件。一切正常,直到我的地图有200多个功能。 200之后创建的要素在地图上有标记,但点击事件不会触发。我是谷歌地图的新手,并且非常感谢任何有助于点击所有点击事件的帮助。提前谢谢。
我的代码是:
<script>
var map;
var gridInfowindow = null; // save the inforwindow opened by a grid click so it can be closed
var mapInfowindow = null; // save the inforwindow opened by a map marker click so it can be closed
// ====================================================
function initMap()
{
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var markerData = document.getElementById('htJson').value;
if ((markerData == null) || (markerData == '')) // if no points to show, don't show map
{
return;
}
var mapOptions =
{
zoom: 30,
center: new google.maps.LatLng(32.37303120, -90.12610130), // cener around ITS
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
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
{
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'), // set the market tilte to name property value from geoJson
map: map
});
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
}
}
);
map.data.addListener('click', function (e) { // if marker is clicked, build info window
var myId = e.feature.getProperty('id');
var myName = e.feature.getProperty('name');
var myAddr = e.feature.getProperty('address1');
var myCity = e.feature.getProperty('city');
var boxText = "<div id='infoWindow'>" + myName + "<br />" + myAddr + ", " + myCity + "</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
focusOn(myId); // set focus on this entry in the list view
mapInfowindow = infowindow; // save location of this map info window
if (gridInfowindow) {
gridInfowindow.close(); // close any previously opend grid info window
gridInfowindow = null; // reset grid info window
}
});
var markerData = document.getElementById('htJson').value; // get hidden text field
var officeLocations = JSON.parse(markerData); // convert text to JSON object
map.data.addGeoJson(officeLocations); // use data layer function to add all the markers in geoJson onject
} // end initMaps
// This function is triggered by a click event on a map marker and will put focus on the <div> having the the same id as the ProviderId
function focusOn(providerId)
{
document.getElementById(providerId).focus();
}
// This function is triggered by a grid click event and will put focus on the map marker having the the same id as the ProviderId
function showMarker(divId)
{
var infowindow = new google.maps.InfoWindow();
if (gridInfowindow)
{
gridInfowindow.close();
gridInfowindow = null;
}
if (mapInfowindow) {
mapInfowindow.close();
mapInfowindow = null;
}
map.data.forEach(function(feature)
{
if(feature.getProperty('id') == divId)
{
var myId = feature.getProperty('id');
var myName = feature.getProperty('name');
var myAddr = feature.getProperty('address1');
var myCity = feature.getProperty('city');
var boxText = "<div style=infoWindow><b>"+ myName + "</b><br />" + myAddr + ", " + myCity + "</div>";
infowindow.setContent("<div style='text-align: center;'>" + boxText + "</div>");
infowindow.setPosition(feature.getGeometry().get());
infowindow.setOptions({ pixelOffset: new google.maps.Size(0, -30) });
infowindow.open(map);
focusOn(myId);
gridInfowindow = infowindow;
}
})
document.getElementById("map_canvas").focus();
if (gridInfowindow === null)
{
alert("The location of this facility is not known.");
}
}
</script>
答案 0 :(得分:0)
Google地图对每个唯一API密钥的API使用都有限制。请考虑通过电子邮件向Google地图帮助人员发送有关您的问题的电子邮件,并可能升级到付费API密钥。
HERE您可以在Google地图计划中详细了解。
答案 1 :(得分:0)
您将google.maps.Marker
个对象置于DataLayer标记之上,当您单击这些标记时,您没有获得InfoWindow(但如果您将鼠标悬停在它们上面,则会得到标记title
) 。
注意:这是时间问题,一些google.maps.Marker
个对象位于顶部,一些位于下方,且数字不一致。
删除您正在创建的google.maps.Marker
个对象。这段代码:
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'), // set the market tilte to name property value from geoJson
map: map
});
代码段
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>