Google Maps，使用place_id創建地圖

Question

是否可以使用Google API為該網站創建一個看起來像這樣的地圖：

https://www.google.pl/maps/place/Googleplex/@37.422,-122.0840835,19z/data=!4m2!3m1!1s0x808fba02425dad8f:0x6c296c66619367e0

因此，我想要的是將地點ID傳遞給API，以獲得類似Googleplex的地點，並且我希望標記位於其上並且地點名稱為紅色。

我正在使用api v3，並且我想直接將其不使用搜索的地點的ID傳遞給它，如下所示： https : //developers.google.com/maps/documentation/javascript/places#place_searches

我也不想嵌入一個預生成的頁面，因為需要覆蓋的區域地圖是動態的頁面寬度和高度。

Answer 1

使用PlacesService和getDetails()方法。

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(-33.8665433, 151.1956316),
        zoom: 15
    });

    var request = {
        placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
    };

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

    service.getDetails(request, function (place, status) {

        if (status == google.maps.places.PlacesServiceStatus.OK) {

            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }
    });
}

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

請參閱https://developers.google.com/maps/documentation/javascript/examples/place-details

Answer 2

該函數具有3個應該存儲在代碼中的輸入。 （在這里您可以找到place_id： https : //developers.google.com/maps/documentation/javascript/examples/places-placeid-finder ）您應該更改地圖ID（或將其作為輸入傳遞）。

function initMap(place_id, lat, lng){
    var map = new google.maps.Map(document.getElementById('js-concrete_map'), {
        center: {lat: lat, lng: lng},
        zoom: 15
    });
    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
        placeId: place_id
    }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
          });
        }
    });
}