CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-apigoogle-places-api
john z
john z

Reputation: 91

how to do autocomplete google places api

I have a place id, using the google place id i need to implement autocomplete local areas.

I have searched on google and i found reference:

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

But the above reference takes 

document.getElementById('map');

As I dont have any maps on the screen, its just an html form.

I have done the cities autocomplete: 

    function initialize() {

    var input = document.getElementById('to-city');
    var options = {types: ['(cities)'],componentRestrictions: {country: 'in'}};

    var autocomplete = new google.maps.places.Autocomplete(input,options);

    autocomplete.addListener('place_changed', function() {

    var place = autocomplete.getPlace();

    if (!place.geometry) {
      return;
    }
    //alert(place.place_id);
    });
}        
google.maps.event.addDomListener(window, 'load', initialize);

Is the above code useful to get the places using placeid?

For your information i have api code too.

Thank in advance!

Upvotes: 0

Views: 1753

Answers (1)

geocodezip
geocodezip

Reputation: 161384

You don't need autocomplete if you have the placeId. Example modified from the example in the documentation to remove the map.

code snippet:

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var service = new google.maps.places.PlacesService(document.getElementById('map'));

  service.getDetails({
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
  }, function(place, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      document.getElementById('info').innerHTML = '<div><strong>' + place.name + '</strong><br>' +
        'Place ID: ' + place.place_id + '<br>' +
        place.formatted_address + '</div>';
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="info"></div>
<div id="map"></div>

Upvotes: 1

Related Questions