Google Places API getDetails formatted_phone_number returns undefined

Question

I have created this bin to get the details of a place - formatted address and formatted phone number.

However, the formatted Phone number shows undefined for the places.

However it does show up phone number for places like "Franklin D. Roosevelt Four Freedoms Park, 1 FDR Four Freedoms Park, Roosevelt Island, NY 10044, USA"

But, most of the other places are returning undefined.

For example this place, https://www.google.co.in/maps/place/iStorage+Limited/@51.533075,-0.3119974,17z/data=!3m1!4b1!4m5!3m4!1s0x4876126b1e57f67d:0x4c6d4388c42b1f06!8m2!3d51.5330717!4d-0.3098087 shows phone number in the map.

But, searching for in the jsbin page, "iStorage Limited 13 Alperton Ln, Perivale, Greenford, Middlesex UB6 8DH, UK" does show that the phone number is undefined.

Am I doing something wrong here in the code ? Or is it because there is no phone number for the other places?

Here is the JSBin Link

Any help is greatly appreciated.

Answer 1

Once you have the place id ( ChIJffZXHmsSdkgRBh8rxIhDbUw for the example in your question), you can do a place details request.

Make sure you include the Places library in your API call: https://maps.googleapis.com/maps/api/js?libraries=places

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 0),
        zoom: 15
    });

    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
        placeId: 'ChIJffZXHmsSdkgRBh8rxIhDbUw'
    }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {

            // Create marker
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            // Center map on place location
            map.setCenter(place.geometry.location);

            // Get DIV element to display opening hours
            var phoneNumberDiv = document.getElementById("phone-number");

            // Create DIV element and append to opening_hours_div
            var content = document.createElement('div');
            content.innerHTML = 'Formatted phone number: ' + place.formatted_phone_number + '<br>'; 
            content.innerHTML += 'International phone number: ' + place.international_phone_number;

            phoneNumberDiv.appendChild(content);
        }
    });
}

initialize();

Have a look at the below working fiddle:

JSFiddle demo

Answer 2

I was using the https://ubilabs.github.io/geocomplete/ to get the place_id but, this does not seem to get the correct place_id

I tried https://google-developers.appspot.com/maps/documentation/javascript/examples/full/places-placeid-finder and this does work for me.

So, when trying to get the place details its important to get the correct autocomplete and get the correct place_id