google-mapsgoogle-maps-api-3google-geocoder

How to get location coordinates knowing place_id via google javascript api


I know place_id, and I need to know it's coordinates.

I can do GET https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJOwE7_GTtwokRFq0uOwLSE9g&key=KEY_GOES_HERE

which gives me something like that:

```   "results" : [
      {
         "address_components" : [...],
         "formatted_address" : "New York County, NY, USA",
         "geometry" : {
            "bounds" : {...},
            "location" : {
               "lat" : 40.7830603,
               "lng" : -73.9712488
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {...}
         },
         "partial_match" : true,
         "place_id" : "ChIJOwE7_GTtwokRFq0uOwLSE9g",
         "types" : [...]
      }
   ],
   "status" : "OK"
```

but I need to do it via javascript api.

I don't have any maps on my page, just need to get the coordinates.


Solution

  • From the example in the Google Maps Javascript API v3 documentation (with your place_id):

    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);
        });
        map.fitBounds(place.geometry.viewport);
      }
    });
    

    working fiddle

    code snippet:

    var geocoder;
    var map;
    
    function initialize() {
      var map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      var request = {
        placeId: 'ChIJOwE7_GTtwokRFq0uOwLSE9g'
      };
    
      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);
          });
          map.fitBounds(place.geometry.viewport);
        }
      });
    
    }
    google.maps.event.addDomListener(window, "load", initialize);
    html,
    body,
    #map_canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
    <div id="map_canvas" style="border: 2px solid #3872ac;"></div>