CODEWITHSUNDEEP
javascriptgoogle-mapsdrupal-7
Horai Nuri
Horai Nuri

Reputation: 5578

Drupal 7 - Javascript integration issue with Google Maps Autocomplete

I'm trying to resolve an integration issue that I have using Google Maps Autocomplete, I have to integrate javascript codes on my drupal 7 website. The code below works fine on jsfiddle, but it's not the case on the drupal website and I cannot find why the Autocomplete doesn't do anything.

Here are some infos that might be useful to help me in this issue.

Here is the code :

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&KEY"> ... </script>

Javascript

data = [{
  "1" : ["1007","1020"],
  "2" : ["1201","1493"],
  "3" : ["6754","8652"],
}]

var localityInput = document.getElementById('locality');
var localityOptions = {
  types: ['(regions)'],
  componentRestrictions: {country: 'ch'}
};

autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    for (var i = 0; i < place.address_components.length; i++) {
        for (var j = 0; j < place.address_components[i].types.length; j++) {
            if (place.address_components[i].types[j] === "postal_code") {
                var value = place.address_components[i].long_name;
                document.getElementById('locality').value = value;
                var foundIt = false;

                for (var i = 0; i < data.length && !foundIt; i++) {
                    for (var key in data[i]) {
                        if (key in data[i]) {
                            if (data[i][key].indexOf(value) !== -1){
                                document.getElementById('text').innerHTML = key;
                                foundIt = true;
                            } 
                        }

                    }
                    if (!foundIt) {
                        document.getElementById('text').innerHTML = 0;
                    }
                }
          } 
       }
  }
})

The code just takes a google maps postal code from the autocomplete suggestions and check if it's in the data, everything works fine on JsFiddle so I don't know if that'll also affect the website.

HTML (just an example of a form for this code)

<form>
    <input id="text"/>
    <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
</form>

Why I have no suggestions from the Google Maps Autocomplete? What am I doing wrong?

Please suggest.

Upvotes: 0

Views: 73

Answers (1)

Horai Nuri
Horai Nuri

Reputation: 5578

After trying for several hours, I found that I had to put the JS in a function and launch it as below.

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>

Upvotes: 1

Related Questions