CODEWITHSUNDEEP
javascriptjquerygoogle-maps
BroDev
BroDev

Reputation: 590

Google Maps Autocomplete not working for some reason

Here is the function:

function initializeMap(){
        var LatLng = {lat: 20.23, lng: -8.28460};
        var mapOptions = {
            center: LatLng,
            zoom: 6,
            scrollwheel:false
        }

        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                draggable: true,
                title: "Binko"
        });

        var input = document.getElementById('accommodation_address');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds',map);

        google.maps.event.addListener(autocomplete, 'place_changed',function(){
            var place=autocomplete.getPlace();
            if (!place.geometry){
                return;
            }
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }

            marker.setPlace( ({
                placeId: place.place_id,
                location: place.geometry.location
            }));
        });
    };

google.maps.event.addDomListener(window, 'load', initializeMap);

I get the uncaught type error, saying autocomplete is not defined, even though I included the library. My API call looks like this: src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places">

Upvotes: 7

Views: 32783

Answers (4)

Matt Goo
Matt Goo

Reputation: 1136

I had my API key enabled, but what I was missing was &libraries=places in the API key include. Documented:

https://developers.google.com/maps/documentation/javascript/places

Upvotes: 0

StevoF
StevoF

Reputation: 477

I have had similar problem. Google maps and autocomplete has worked on my old websites and on localhost but not on new website. I had to create api key and include it in code:

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

Then I had in developer console (where I have got api key) to enable additional api. Steps:

  1. select your project
  2. in left API Manager menu click on Overview
  3. find Google Places API Web Service(you can type it to search box or find it between Google Maps API)
  4. click on Google Places API Web Service
  5. click on Enable button

Upvotes: 13

wf9a5m75
wf9a5m75

Reputation: 6158

Well, I have no problem with your code:

<!DOCTYPE html>
<htm>
<head>
    <title>
    Map
    </title>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en" ></script>
    <script>
    function initializeMap(){
        var LatLng = {lat: 20.23, lng: -8.28460};
        var mapOptions = {
            center: LatLng,
            zoom: 6,
            scrollwheel:false,
            noClear: true
        }

        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                draggable: true,
                title: "Binko"
        });

        var input = document.getElementById('accommodation_address');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds',map);

        google.maps.event.addListener(autocomplete, 'place_changed',function(){
            var place=autocomplete.getPlace();
            if (!place.geometry){
                return;
            }
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }

            marker.setPlace( ({
                placeId: place.place_id,
                location: place.geometry.location
            }));
        });
    };

    google.maps.event.addDomListener(window, 'load', initializeMap);
    </script>
    <style type="text/css">
    html, body, #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #accommodation_address {
      width: 20%;
      position: absolute;
      left: 10%;
      top: 10%;
      background-color: white;
      border: 1px solid gray;
      z-index: 100;
    }
    </style>
</head>
<body>
<div id="map">
  <input type="text" id="accommodation_address" />
</div>
</body></html>

enter image description here

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 3765

Try to do like this:

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

instead of 

google.maps.event.addDomListener(window, 'load', initializeMap);

maybe Places library is not loaded

Upvotes: 1

Related Questions