google maps api geoJSON - 説明ボックスが表示されない

Question

私はウェブサイトに簡単なGoogleマップを実装しようとしています。 データベースから各場所の座標ストアを正常に取得し、addGeoJsonを使用してマップに正常に書き込んでいます。

私の問題は、各位置マーカーをクリックするとテキストが表示されないことです。検索でこの問題を見つけることができませんでしたので、ここに持ってきています！

私のGoogleは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); 
    }); 
} 

通知は、私はすべての項目ごとに繰り返されるプレースホルダーテキストを置きます。それはテスト目的のためだけです。

Answer 1

私は別のポストに解決策が見つかりました：これはリーフレットとしなければならない

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