如何从nearbySearch()结果生成到谷歌地图的URL链接?

时间:2012-11-22 05:20:34

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

通过以下示例,

https://google-developers.appspot.com/maps/documentation/javascript/examples/place-search

通过使用附近的搜索,其中一个地方返回是“John St Square Supermarket”。 如何在完整的谷歌地图中生成一个网址来显示“John St Square Supermarket”? 现在我通过将经度和经度附加到“http://maps.google.com/?q=”来生成http://maps.google.com/?q=123,456 但它不会显示地方的名称和正确的标记。

然后我尝试了http://maps.google.com/?q=John St Square Supermarket

工作良好......直到我偶然发现了一个有多个地点的地名。例如,

http://maps.google.com/?q=SK%20Dato%27%20Abu%20Bakar

它显示了多个位置,但我只需要一个我已经知道它的纬度和经度是什么。

2 个答案:

答案 0 :(得分:2)

您可以使用参数ll

将纬度和经度添加到网址
  

https://maps.google.com/?q=pizza+hut&ll=-33.867701,151.208471

您还可以使用参数z

为用户指定默认缩放级别
  

https://maps.google.com/?q=pizza+hut&ll=-33.867701,151.208471&z=12

答案 1 :(得分:0)

PlacesResult.url属性代表Google地方信息的网址。 https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

所以你可以这样做:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Place Search</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

    <style>
      #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
      }
    </style>

    <script>
      var map;
      var infowindow;
      var service;

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

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId : google.maps.MapTypeId.ROADMAP,
          center : pyrmont,
          zoom : 15
        });

        var request = {
          location : pyrmont,
          radius : 500,
          types : ['store']
        };
        infowindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

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

        google.maps.event.addListener(marker, 'click', onMarker_clicked);
      }

      function onMarker_clicked() {
        var marker = this;

        service.getDetails({
          reference : marker.get("reference")
        }, function(result) {
          var html = marker.get("name");
          if (result && "url" in result) {
            marker.set("url", result.url);
          }

          if (marker.get("url")) {
            html = "<a href='" + marker.get("url") + "' target=_blank>" + html + "</a>";
          }
          infowindow.setContent(html);
          infowindow.open(map, marker);
        });
      }


      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>