popup window containing attributes from geojson in google maps

Question

I would like to have a popup window containing the attributes stored in the geojson for each point. I can get the map and marker to render but no pop-up box containing attributes when I click on the point.

I'm sure it is something simple but I have tried this, this and this and still can't get it to work...

Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map { 
                width: 100%;
                height: 600px;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script src="POINTS.js"></script>
        <script>    
            function initialize() {
                features = []
                var mapDiv = document.getElementById('map');
                map = new google.maps.Map(mapDiv, {
                    center: {lat: 44.540, lng: -78.546},
                    zoom: 2
                });

            // When the user clicks, open an infowindow
            var infowindow = new google.maps.InfoWindow();
            map.data.addListener('click', function(event) {
                var myHTML = event.feature.getProperty("id");
                infowindow.setContent("<div style='width:150px;'>"+myHTML+"</div>");
                // position the infowindow on the marker
                var anchor = new google.maps.MVCObject();
                anchor.set("position", event.latLng);
                infoWindow.open(map, anchor);
            });    

            // load data
            map.data.addGeoJson(data);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=visualization&callback=initialize">   
        </script>

    </head>  
    <body>
        <div id="map"></div>
    </body>
</html>

And here is my POINT.js

var data = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
{ "type": "Feature", "properties": { "id": 1, "X": 144.961836, "Y": -36.749381 }, "geometry": { "type": "Point", "coordinates": [ 144.961836873913285, -36.749381167692619 ] } }
]
}

popup window containing attributes from geojson in google maps

0 Answers0