CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-places-api
user1809157
user1809157

Reputation: 295

How to generate url link to google map from nearbySearch() results?

With the example below,

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

By using nearbySearch one of the place return is "John St Square Supermarket". How do i generate a url to show "John St Square Supermarket" in full google maps? Right now i'm generating by appending the latitude and longitude into "http://maps.google.com/?q=" which become something like http://maps.google.com/?q=123,456 but it won't show the place's name and the correct marker.

I then tried with http://maps.google.com/?q=John St Square Supermarket

Working good... until i stumble into a place name with multiple locations. For example,

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

It shows multiple location but i only need one which i already know what it's latitude and longitude is.

Upvotes: 0

Views: 1387

Answers (2)

Chris Green
Chris Green

Reputation: 4427

You can add the Latitude and Longitude to the URL using the parameter ll:

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

You can also specify a default zoom level for the user using the paremeter z:

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

Upvotes: 2

wf9a5m75
wf9a5m75

Reputation: 6158

PlacesResult.url property stands for the url of Google Places. https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

So you can do like this:

<!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>

Upvotes: 0

Related Questions