Javascript Autocomplete Location Tutorial

Javascript Autocomplete Location Tutorial

JavaScript AutoComplete Location

Sometimes we need a autocomplete Textfield in Web Development where we enter only some values then address will show suggestion now we can implement this Types of Input fields.?

Lets Start Today!.

Step  1 : Visit Google Developer Console .



Google Maps Developer


Step 2 : Select  "Google Places API JavaScript Library"

     LinkGoogle Place Api
Google Place Library


Step 3 : Click on Get Key Then .


Google Api key

Step 4 : Create a new project

Google map project

Step 5 : Copy Key .

Api key

Now Let's Start Our Code . 

index.html

 
<!DOCTYPE html>
<html>
<head>
 <title>Google Place</title>
</head>
<body>
 <input type="text" placeholder="Searc place" id="autocomplete">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=YOUR_API_KEY"></script>
<script type="text/javascript">

 //===================function for set input to google auto complete===================
 function AutoComplete() {
       var input = document.getElementById('autocomplete');
            new google.maps.places.Autocomplete(input);
 }

     //=============Call  function when our page load completes====================
     google.maps.event.addDomListener(window, 'load', AutoComplete);

</script>
</body>
</html>
 
 
autocomplete location input
 Thanks!
Previous Post
Next Post

post written by:

0 comments: