Javascript Autocomplete Location Tutorial
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 .
Here : Google Maps Developer Link
Step 2 : Select "Google Places API JavaScript Library"
Step 3 : Click on Get Key Then .
Step 4 : Create a new project
Step 5 : Copy 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>
Thanks!
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment