在不指定纬度和经度的情况下将谷歌地图放在地点 ID 上？答案

【问题标题】：Center google Map on place ID without specifying lat and long?在不指定纬度和经度的情况下将谷歌地图放在地点 ID 上？
【发布时间】：2016-01-03 14:59:19
【问题描述】：

如何根据 placeID 将谷歌地图居中，而不在地图对象中明确设置 lat 和 lng？

我见过的所有示例都有一个值集，例如

var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

^{表格：developers.google.com}

您当然可以根据 ID 获取地点的详细信息，然后使用 lat 和 lng 将地图居中？

function initializeGoogleMaps() {
  jQuery('.site-content').prepend('<div id=\"map-container\"><div id=\"map-canvas\"></div></div>');

  var request = {
    placeId: 'ChIJzXBGLkQFdkgRoyT2MIxgWGw'
  };

  function callback(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
      });
    }
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: {
      lat: 51.509526,
      lng: -0.156314
    },
    zoom: 15
  });

  service = new google.maps.places.PlacesService(map);
  service.getDetails(request, callback);
}

【问题讨论】：

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

【解决方案1】：

您可以使用从位置服务返回的值（或标记的位置）设置地图的中心：

proof of concept fiddle

  function callback(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
      });
      map.setCenter(marker.getPosition());
    }
  }

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

代码 sn-p：

function initializeGoogleMaps() {
  var request = {
    placeId: 'ChIJzXBGLkQFdkgRoyT2MIxgWGw'
  };

  function callback(place, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
      });
      map.setCenter(marker.getPosition());
    }
  }

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

  service = new google.maps.places.PlacesService(map);
  service.getDetails(request, callback);
}
google.maps.event.addDomListener(window, 'load', initializeGoogleMaps);

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

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

【讨论】：