Welcome to Help center

We are here to help

Autocomplete

Follow

Autocomplete for Addresses and Search Terms

HTML:
        <input type="text" class="form-control" id="address-map" name="address">
    
Before </body> tag ends:
        <script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>
        <script>
            var input = ( document.getElementById('address-map') );
            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(15);
                }
                marker.setPosition(place.geometry.location);
                marker.setVisible(true);
                $('#latitude').val( marker.getPosition().lat() );
                $('#longitude').val( marker.getPosition().lng() );
                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(' ');
                }
            });
        </script>
    

 

Have more questions?

Submit a request

Comments

Top
Powered by Zendesk