谷歌地图,使用place_id创建地图

时间:2015-02-20 09:25:03

标签: javascript google-maps google-maps-api-3 google-places-api

是否可以使用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

我也不想嵌入预生成的,因为区域地图需要覆盖的是页面宽度和高度的动态。

2 个答案:

答案 0 :(得分:2)

使用PlacesServicegetDetails()方法。

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

答案 1 :(得分:0)

该函数有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);
          });
        }
    });
}