Add to collection
Expert User

Expert User

Verified

Autocomplete location in text box from Google MAP

Autocomplete location using a Google API key

Try Yourself in Code Editor    

Location can be autocompleted in textbox using google map API. We have to first create the API Key of google map from Google API cloud by creating your ID.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=Your API KEY&libraries=places&language=en-AU"></script>

Put your API key on the above script.

Please find the rest of the source code right side.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=Your API KEY&libraries=places&language=en-AU"></script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('Location'));
        google.maps.event.addListener(places, 'place_changed', function () {
            var place = places.getPlace();
           // var address = place.formatted_address;
            

        });
    });
</script>
 <div class="form-group">
    <input type="text" placeholder="google map" name="Location" id="Location"/>
</div>

References and Credits

Comments 0

  • Sorry!! No comment posted yet. Become the first user to give comment.
Add a comment

Would you like to write for w3 sniff?

Become part of an amazing group of contributors and authors and start writing for us

Join Now
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=Your API KEY&libraries=places&language=en-AU"></script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('Location'));
        google.maps.event.addListener(places, 'place_changed', function () {
            var place = places.getPlace();
           // var address = place.formatted_address;
            

        });
    });
</script>
 <div class="form-group">
    <input type="text" placeholder="google map" name="Location" id="Location"/>
</div>
Feedback submitted successfully.