Google Maps API Javascript：激活地點搜索框中標記的infowindows

Question

我已嚴格按照Google開發人員documentation執行了地點搜索框。標記將根據特定的搜索詞顯示在地圖上（例如「餐館」）。當然，當用戶點擊某個標記時，我想要顯示一個infowindow，以便向用戶提供有關該地點的一些信息。我跟蹤Google開發者documentation以激活infowindows，但沒有取得任何成功（我在代碼中所做的更改由註釋1,2和3說明）。

此前的帖子並沒有幫助我。任何幫助將不勝感激。

<script> 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -33.8688, lng: 151.2195}, 
    zoom: 13, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 


var input = document.getElementById('pac-input'); 
var searchBox = new google.maps.places.SearchBox(input); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 


map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
}); 


// 1: Variables infowindow and service: 

var infowindow = new google.maps.InfoWindow(); 
var service = new google.maps.places.PlacesService(map); 

var markers = []; 

searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlaces(); 

    if (places.length == 0) { 
     return; 
    } 

    markers.forEach(function(marker) { 
     marker.setMap(null); 
    }); 
    markers = []; 

    var bounds = new google.maps.LatLngBounds(); 

    places.forEach(function(place) { 
     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) 
     }; 

     markers.push(new google.maps.Marker({ 
     map: map, 
     icon: icon, 
     title: place.name, 
     position: place.geometry.location 
     })); 

     if (place.geometry.viewport) { 

     bounds.union(place.geometry.viewport); 
     } else { 
     bounds.extend(place.geometry.location); 
     } 
    }); 

// 2: getDetails, referring to the "places" (var places = searchBox.getPlaces();) already on the map 
// 3: addlistener on the markers, to show an infowindow upon a clickevent 

    service.getDetails(places, function(place, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     google.maps.event.addListener(markers, 'click', function() { 
     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
      'Place ID: ' + place.place_id + '<br>' + 
      place.formatted_address + '</div>'); 
     infowindow.open(map, this); 
     }); 
    } 
    }); 



    map.fitBounds(bounds); 
}); 


} 

</script> 

Answer 1

你需要做的就是點擊標記時（如果您在創建你會遇到的查詢限制標記運行所有的細節要求）的細節要求。

然後在響應回來時打開標記上的infowindow。

代碼片斷：

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -33.8688, 
 
     lng: 151.2195 
 
    }, 
 
    zoom: 13, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 

 
    var input = document.getElementById('pac-input'); 
 
    var searchBox = new google.maps.places.SearchBox(input); 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 
    map.addListener('bounds_changed', function() { 
 
    searchBox.setBounds(map.getBounds()); 
 
    }); 
 
    // 1: Variables infowindow and service: 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    var markers = []; 
 
    searchBox.addListener('places_changed', function() { 
 
    var places = searchBox.getPlaces(); 
 
    if (places.length == 0) { 
 
     return; 
 
    } 
 
    markers.forEach(function(marker) { 
 
     marker.setMap(null); 
 
    }); 
 
    markers = []; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    places.forEach(function(place) { 
 
     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) 
 
     }; 
 

 
     var marker = new google.maps.Marker({ 
 
      map: map, 
 
      icon: icon, 
 
      title: place.name, 
 
      position: place.geometry.location, 
 
      placeId: place.place_id 
 
     }); 
 
     markers.push(marker); 
 
     google.maps.event.addListener(marker, 'click', function(evt) { 
 
      // 2: getDetails, referring to the "places" (var places = searchBox.getPlaces();) already on the map 
 
      // 3: addlistener on the markers, to show an infowindow upon a clickevent 
 

 
      service.getDetails({ 
 
      placeId: this.placeId 
 
      }, (function(marker) { 
 
      return function(place, status) { 
 
       if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
       infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
 
        'Place ID: ' + place.place_id + '<br>' + 
 
        place.formatted_address + '</div>'); 
 
       infowindow.open(map, marker); 
 
       } 
 
      } 
 
      }(marker))); 
 
     }); 
 
     if (place.geometry.location) { 
 
      bounds.extend(place.geometry.location); 
 
     } 
 
     }) 
 
     // map.fitBounds(bounds); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="pac-input" type="text" /> 
 
<div id="map"></div>