Get LatLng in Google Maps Places Autocomplete
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<!-- CHECK ELEMENT ID also UPDATE CSS -->Please fill in:
<input id="searchTextField" type="text" size="50">
<div id="map_canvas"></div>
<div ng-controller="Ctrl">
<input id="lat" type="text" />
<input id="lng" type="text" />
</div>
CSS
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
display: none;
}
JavaScript
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
alert('lat ' + place.geometry.location.lat() + ' lng '+ place.geometry.location.lng());
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function () {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
function updateTextFields(lat, lng) {
$('#lat').val(lat);
$('#lng').val(lng);
}