Google地圖使用地點ID添加標記

Question

我想使用其PlaceID將標記放置到Google地圖上。我有地圖工作和顯示，也可以添加標記（使用LatLong）。

下面的代碼是我用來嘗試使用它的placeID進行標記顯示，但它不顯示。

function addPlaces(){ 
    var marker = new google.maps.Marker({ 
     place: new google.maps.Place('ChIJN1t_tDeuEmsRUsoyG83frY4'), 
     map: map 
    }); 
} 

該函數在地圖加載後調用。

google.maps.event.addDomListener(window, "load", addPlaces); 

Answer 1

如果要放置在地圖上的標記在與place_id的地方： 'ChIJN1t_tDeuEmsRUsoyG83frY4'，你需要做一個getDetails請求PlaceService

var service = new google.maps.places.PlacesService(map); 
service.getDetails({ 
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' 
}, function (result, status) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     place: { 
      placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4', 
      location: result.geometry.location 
     } 
    }); 
}); 

proof of concept fiddle

代碼片段：

var map; 
 
var infoWindow; 
 
var service; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 19, 
 
    center: new google.maps.LatLng(51.257195, 3.716563) 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    infoWindow = new google.maps.InfoWindow(); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    service.getDetails({ 
 
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' 
 
    }, function(result, status) { 
 
    if (status != google.maps.places.PlacesServiceStatus.OK) { 
 
     alert(status); 
 
     return; 
 
    } 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: result.geometry.location 
 
    }); 
 
    var address = result.adr_address; 
 
    var newAddr = address.split("</span>,"); 
 

 
    infoWindow.setContent(result.name + "<br>" + newAddr[0] + "<br>" + newAddr[1] + "<br>" + newAddr[2]); 
 
    infoWindow.open(map, marker); 
 
    }); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script> 
 
<div id="map-canvas"></div>