After 200 Google Map Features, Click events do not fire

Question

I using the Google Maps JavaScript API to create markers on a map by loading geoJSON data. Each feature creates a marker and each marker has a Click event that opens an InfoWindow. Everything is working fine until my map has over 200 features. The features created after 200 have a marker on the map, but the click event does not fire. I am new to Google maps and would apprecite any help toward making all the click events fire. Thanks in advance.

My code is:

<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>

Answer 1

Google Maps has a limit on their API usage for every unique API key. Consider emailing the Google Maps help staff about your issue and possibly upgrading to a paid API key.

HERE you can read more on the Google Maps plans.

Answer 2

You are putting google.maps.Marker objects on top of the DataLayer markers, when you click on those, you don't get the InfoWindow (but if you mouse over them, you get the Marker title).

Note: this is a timing thing, some of google.maps.Marker objects are on top and some are underneath, and the number is not consistent.

Remove the google.maps.Marker objects you are creating. This code:

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

code snippet:

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>