user input will be bound and used to get the location suggestions by autocomplete service.
e.g,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>autocomplete filed using google maps javascript api</title>
</head>
<body>
<input type="text" class="autocomplete" id="address" name="address" placeholder="enter your address">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7ySADLW8s5JR9LvasMVvQ_1S84JgYNzo&libraries=places"></script>
<script>
//auto complete on textbox google address
var acInputs = document.getElementsByClassName("autocomplete");
for (var i = 0; i < acInputs.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
autocomplete.inputId = acInputs[i].value;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
//some own code here
});
}
</script>
</body>
</html>
e.g,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>autocomplete filed using google maps javascript api</title>
</head>
<body>
<input type="text" class="autocomplete" id="address" name="address" placeholder="enter your address">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7ySADLW8s5JR9LvasMVvQ_1S84JgYNzo&libraries=places"></script>
<script>
//auto complete on textbox google address
var acInputs = document.getElementsByClassName("autocomplete");
for (var i = 0; i < acInputs.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
autocomplete.inputId = acInputs[i].value;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
//some own code here
});
}
</script>
</body>
</html>
0 Comments