谷歌地图api geoJSON - 没有出现描述框

Question

I am trying to implement a simple google maps into a website. I am successfully retrieving my coordinates store for each location from the database, and successfully writing them to the map using addGeoJson.

My problem is there is no text appearing when you click on each location marker. I was unable to find this issue through searching so I am bringing it here!

my google places javascript:

    function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 38.789763, lng: -89.991966},
        zoom: 13,
        mapTypeId: 'roadmap',
        styles: mapStyle
    });
//load coordinates of restaurants from db
    $.get('/getPlaces', function (data) {
        placesJSON = {"type": "FeatureCollection", "features": [], "type": "FeatureCollection"};
        places = jQuery.parseJSON(data);
        for (var i = 0; i < places.length; i++) {
            placesJSON.features.push({"type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [Number(places[i].lng), Number(places[i].lat)]
                },
                "properties": {
                    "title": "Lincoln Park",
                    "description": "A northside park that is home to the Lincoln Park Zoo"
                },
            });
        }
        console.log(placesJSON);
        map.data.addGeoJson(placesJSON);
    })
            .fail(function (xhr, textStatus, errorThrown) {
                alert(errorThrown);
            });
    infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            infoWindow.setPosition(pos);
            map.setCenter(pos);
        }, function () {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
// Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
// Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
// Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function () {
        searchBox.setBounds(map.getBounds());
    });

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
    var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
    searchBox.addListener('places_changed', function () {
        var places = searchBox.getPlaces();
        if (places.length == 0) {
            return;
        }

        // Clear out the old markers.
        markers.forEach(function (marker) {
            marker.setMap(null);
        });
        markers = [];
        // For each place, get the icon, name and location.
        var bounds = new google.maps.LatLngBounds();
        places.forEach(function (place) {
            console.log(place);
            if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
            }
            var icon = {
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(25, 25)
            };
            // Create a marker for each place.
            markers.push(new google.maps.Marker({
                map: map,
                icon: icon,
                title: place.name,
                position: place.geometry.location
            }));
            if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
            } else {
                bounds.extend(place.geometry.location);
            }
        });
        map.fitBounds(bounds);
    });
}

notice i put placeholder text that will be repeated for every item. That is just for testing purposes.

Answer 1

I found the solution on another post:

map.data.addListener('click', function (event) {
    infoWindow.setContent(event.feature.getProperty('name') + "<br>" + event.feature.getProperty('description'));
    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -34)});
    infoWindow.open(map);
});