Google Places Auto Complete on Mobile Phone

Google Places Auto Complete on Mobile Phone

  

I have below javascript code in a screen action on mobile. I'm calling the screen action on the onchange event of a text input box. But I'm getting an error in my mobile phone - "Cannot read property 'Autocomplete of undefined' ".

What I'm trying to achieve is a address/place autocomplete functionality in a text input. I'm suspecting that the google places is was not referenced in the code. Do you know how to reference this code on mobile? Your help is much appreciated!

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">


Javascript code:


function initMap() {

  var map = new google.maps.Map(document.getElementById('DirectionsMap'), {

    center: {lat: -33.8688, lng: 151.2195},

    zoom: 17

  });

  var input = document.getElementById('Input_OriginAddress');


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


  // Bind the map's bounds (viewport) property to the autocomplete object,

  // so that the autocomplete requests use the current map bounds for the

  // bounds option in the request.

  autocomplete.bindTo('bounds', map);


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


    var place = autocomplete.getPlace();

    if (!place.geometry) {

      // User entered the name of a Place that was not suggested and

      // pressed the Enter key, or the Place Details request failed.

      window.alert("No details available for input: '" + place.name + "'");

      return;

    }


    // If the place has a geometry, then present it on a map.

    if (place.geometry.viewport) {

      map.fitBounds(place.geometry.viewport);

    } else {

      map.setCenter(place.geometry.location);

      map.setZoom(17);  // Why 17? Because it looks good.

    }


    var address = '';

    if (place.address_components) {

      address = [

        (place.address_components[0] && place.address_components[0].short_name || ''),

        (place.address_components[1] && place.address_components[1].short_name || ''),

        (place.address_components[2] && place.address_components[2].short_name || '')

      ].join(' ');

    }

    window.alert(address)

  });





}



initMap();




Solution

Hi Rian,

You are not using the correct values for the GetElementById('') functions.

  1. First you should create parameters in the javascript block for the WidgetIdentifiers.
  2. Then you need to create input parameters in the client action for all the javascript parameters.
  3. Assign the input parameters to the parameters of the javascript.
  4. When calling the client action, fill the input parameters with the Widget Identifiers.

This should fix your problem.

Kind regards,

Remco Dekkinga

Solution

Hello Rian,


I am also facing the same issue,It would be helpful if you can share your oml here.


Thanks and Regards,

Atul Patel

Remco Dekkinga wrote:

Hi Rian,

You are not using the correct values for the GetElementById('') functions.

  1. First you should create parameters in the javascript block for the WidgetIdentifiers.
  2. Then you need to create input parameters in the client action for all the javascript parameters.
  3. Assign the input parameters to the parameters of the javascript.
  4. When calling the client action, fill the input parameters with the Widget Identifiers.

This should fix your problem.

Kind regards,

Remco Dekkinga

Hello Remco,


If you can provide oml for this issue it would be helpful.


Thanks and Regards,

Atul Patel


Hi Atul,

I'm sorry, but due to a limited amount of available free time, I'm not able to provide you an out-of-the-box solution for free right now. PM me if you need this solution on short notice.

Kind regards,

Remco Dekkinga

Remco Dekkinga wrote:

Hi Atul,

I'm sorry, but due to a limited amount of available free time, I'm not able to provide you an out-of-the-box solution for free right now. PM me if you need this solution on short notice.

Kind regards,

Remco Dekkinga

Hello Remco,


Thanks for your reply, I have successfully created the solution for this along with google maps integration.


Thanks,

Atul Patel


Hi Atul,

I'm happy to hear that you were able to solve the issue. 

Kind regards,

Remco Dekkinga

Atul Patel wrote:

Remco Dekkinga wrote:

Hi Atul,

I'm sorry, but due to a limited amount of available free time, I'm not able to provide you an out-of-the-box solution for free right now. PM me if you need this solution on short notice.

Kind regards,

Remco Dekkinga

Hello Remco,


Thanks for your reply, I have successfully created the solution for this along with google maps integration.


Thanks,

Atul Patel


Hello Atul! 


Can you share the solution please?

I'm having the same issue!


Cheers,

Diogo