4-7-2019 16:34:13
[code]
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places" async defer></script>
<style>
input, textarea{min-width:400px;margin-bottom:20px;}
</style>
</head>
<body>
<textarea placeholder="Enter Area name to populate Latitude and Longitude" name="address" onFocus="initializeAutocomplete()" id="locality"></textarea><br>
<input type="text" name="city" id="city" placeholder="City" value=""><br>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" value=""><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude" value=""><br>
<input type="text" name="place_id" id="location_id" placeholder="Location Ids" value=""><br>
<script type="text/javascript">
function initializeAutocomplete() {
var input = document.getElementById('locality');
var options = {}
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var placeId = place.place_id;
// to set city name, using the locality param
var componentForm = {
locality: 'short_name',
};
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components
.types[0];
if (componentForm[addressType]) {
var val = place.address_components[componentForm[addressType]];
document.getElementById("city").value = val;
}
}
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lng;
document.getElementById("location_id").value = placeId;
});
}
</script>
</body>
</html>
[/code]