在200个Google地图功能之后,Click事件不会触发

时间:2016-11-08 18:01:06

标签: javascript google-maps google-maps-api-3

我使用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>

2 个答案:

答案 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
});

proof of concept fiddle

代码段

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>