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('acmodation_address');
        var autoplete = new google.maps.places.Autoplete(input);
        autoplete.bindTo('bounds',map);

        google.maps.event.addListener(autoplete, 'place_changed',function(){
            var place=autoplete.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 autoplete is not defined, even though I included the library. My API call looks like this: src=";libraries=places">

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('acmodation_address');
        var autoplete = new google.maps.places.Autoplete(input);
        autoplete.bindTo('bounds',map);

        google.maps.event.addListener(autoplete, 'place_changed',function(){
            var place=autoplete.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 autoplete is not defined, even though I included the library. My API call looks like this: src="https://maps.googleapis./maps/api/js?key=MY_API_KEY&libraries=places">

• javascript
• jquery
• google-maps

• Your code as posted works for me (but it isn't plete). Please provide a Minimal, Complete, Tested and Readable example that demonstrates your issue. – geocodezip Commented Mar 4, 2016 at 18:06

4 Answers 4

I have had similar problem. Google maps and autoplete 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./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

Try to do like this:

<script src="https://maps.googleapis./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

Well, I have no problem with your code:

<!DOCTYPE html>
<htm>
<head>
    <title>
    Map
    </title>
    <script src="https://maps.googleapis./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('acmodation_address');
        var autoplete = new google.maps.places.Autoplete(input);
        autoplete.bindTo('bounds',map);

        google.maps.event.addListener(autoplete, 'place_changed',function(){
            var place=autoplete.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;
    }
    #acmodation_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="acmodation_address" />
</div>
</body></html>

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

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