javascript - Getting Google Maps link from place_id - Stack Overflow

admin管理员组

文章数量:1134600

HeIIo, using google map API with search I'm able to find a certain place and then store it's details. However, the array doesn't contain google maps link which would open this place on google maps.

Via API I receive place_id which, as I feel, should be enough to build a full google maps link; however, I can't find a way to do that. Can anyone advise me on how to do that.

Thank you for your time.

HeIIo, using google map API with search I'm able to find a certain place and then store it's details. However, the array doesn't contain google maps link which would open this place on google maps.

Via API I receive place_id which, as I feel, should be enough to build a full google maps link; however, I can't find a way to do that. Can anyone advise me on how to do that.

Thank you for your time.

• javascript
• google-maps
• google-maps-api-3
• google-maps-urls

Share Improve this question Follow edited Aug 23, 2018 at 22:41 xomena 32.1k66 gold badges9595 silver badges124124 bronze badges asked Jun 16, 2015 at 0:41 A LA L 61911 gold badge55 silver badges66 bronze badges 2

• 2 I'm having this same issue in an Android app I'm building. If the answer below is correct, it seems ridiculous to have to use the returned place_id to create another URL request to get the correct CID – Wayne Johnson Commented Apr 22, 2016 at 15:37
• I found this tool, which is based on the answers below, to be extremely useful: Google Maps Place ID Opener. – Lars Flieger Commented Jun 27, 2024 at 10:20

Add a comment  | 

9 Answers 9

Sorted by: Reset to default 177

Try below syntax. I hope it helps

https://www.google.com/maps/place/?q=place_id:ChIJp4JiUCNP0xQR1JaSjpW_Hms

Here is an official url to search for a placeId with a fallback to an address if the placeId does not exist

https://www.google.com/maps/search/?api=1&query=<address>&query_place_id=<placeId>

no token required, works on Android, iOS (as well as iOS 11) and web

There is a way of always getting the right URL but it does require an additional request.

You can use the place_id to get the place details with https://maps.googleapis.com/maps/api/place/details/json?key=YOURAPIKEY&placeid=THEPLACEID

The response from that has a ['result']['url'] field which always opens up the right place. eg. https://maps.google.com/?cid=10254754059248426663

There is no documentation for the expected parameters on https://www.google.com/maps/place , so this may only be a workaround(at least it currently works for me).

The following URL-format seems to give the desired result in most cases:

https://www.google.com/maps/place/[place-name]/@[latitude],[longitude],[zoom]z/

You may create this URL based on the place-name and the place-geometry

function initialize() {
  var ac = new google.maps.places.Autocomplete(document.getElementById('pac'));
  google.maps.event.addListener(ac, 'place_changed', function() {
    var place = this.getPlace(),
      link = document.getElementById('link');
    if (!place.geometry) {
      link.textContent = '';
    } else {
      var zoom = 17,
        url = 'https://www.google.com/maps/place/' +
        encodeURIComponent(place.name) + '/@' +
        place.geometry.location.toUrlValue() + ',' +
        zoom + 'z/';
      link.href = link.textContent = url;

    }

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

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places">
</script>
<input id="pac" />
<br/>
<a id="link"  href="" target="_blank"></a>

I had the same problem with an iOS app redirecting users to the desired place (returned from nearbysearch API) in google maps.

They mentioned above:

https://www.google.com/maps/place/?q=place_id:ChIJp4JiUCNP0xQR1JaSjpW_Hms

If you open this link in your browser, it will show a place on the google map website.

But if you try to open this link on a mobile phone, it will open the google map application instead (if it exists on the user's phone) and not redirect to safari. Also, the google map application doesn't show the place (that link will work on the browser only).

After testing many ways for creating a link to work both in the google map application and browser, the best way is to show a place is just passing location and place_id within the link.

let url = "https://www.google.com/maps/search/?api=1&query=\(placeLatitude)%2C\(placeLongitude)&query_place_id=\(placeId)"

You can use google embed API, and take src as a link: eg:

 https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=place_id:YOUR_PLACE_ID

Docs: https://developers.google.com/maps/documentation/embed/guide#place_mode

You can use google embed API, and take src as a link: eg:

https://maps.googleapis.com/maps/api/place/details/json?place_id=ChIJN1t_tDeuEmsRUsoyG83frY4&key=YOUR_API_KEY

What worked for me without place_id

https://www.google.com/maps/search/<search term>/@<coordinates>,<zoom level>z

Example

https://www.google.com/maps/search/Jouvay+Night+Club/@40.6961111,-73.8041667,15z

I was able to get the value using this function

const getGoogleMapUrl = async (place_id: string) => {
  return new Promise<string>((resolve, reject) => {
    const service = new google.maps.places.PlacesService(document.createElement('div'))

    service.getDetails(
      {
        placeId: place_id,
        fields: ['url']
      },
      (result, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK && result?.url) {
          resolve(result.url)
        } else {
          reject(new Error('Failed to get place details'))
        }
      }
    )
  })
}

本文标签： javascriptGetting Google Maps link from placeidStack Overflow