How to get latitude and longitude from google place map?

Question

I know i am asking silly question for your type of knowledgeable coding expert but i am not... I am working on map to get latitude and longitude (coordinates) of searched location or by dragging location marker but i am not getting success. I think you can help me to improve.I searched for lot of example here and I got many references but it is not as per my requirement because it only search for location not deep till particular address as shown in my fiddle. FIDDLE

 function initialize() { var markers = []; var map = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP }); var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631)); map.fitBounds(defaultBounds); // Create the search box and link it to the UI element. var input = /** @type {HTMLInputElement} */ ( document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); var searchBox = new google.maps.places.SearchBox( /** @type {HTMLInputElement} */ (input)); // Listen for the event fired when the user selects an item from the // pick list. Retrieve the matching places for that item. google.maps.event.addListener(searchBox, 'places_changed', function () { var places = searchBox.getPlaces(); for (var i = 0, marker; marker = markers[i]; i++) { marker.setMap(null); } markers = []; var bounds = new google.maps.LatLngBounds(); for (var i = 0, place; place = places[i]; i++) { // Create a marker for each place. var marker = new google.maps.Marker({ map: map, draggable:true, title: place.name, position: place.geometry.location }); markers.push(marker); bounds.extend(place.geometry.location); } map.fitBounds(bounds); }); } initialize(); 

 #map-canvas { height:400px; width:600px; } .controls { margin-top: 16px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #pac-input { background-color: #fff; padding: 0 11px 0 13px; width: 400px; font-family: Roboto; font-size: 15px; font-weight: 300; text-overflow: ellipsis; } #pac-input:focus { border-color: #4d90fe; margin-left: -1px; padding-left: 14px; /* Regular padding-left + 1. */ width: 401px; } .pac-container { font-family: Roboto; } #type-selector { color: #fff; background-color: #4d90fe; padding: 5px 11px 0px 11px; } #type-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="map-canvas"></div> <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 

`

Answer 1

You can easily update your existing Fiddle to implement this by adding the following code after the creation of the marker:

var latInput = document.getElementsByName('latitude')[0];
var lngInput = document.getElementsByName('longitude')[0];
latInput.value = place.geometry.location.lat()
lngInput.value = place.geometry.location.lng();
google.maps.event.addListener(marker, 'dragend', function (e) {
    latInput.value = e.latLng.lat();
    lngInput.value = e.latLng.lng();
});

I've forked and updated your fiddle to reflect this addition:

Updated Fiddle

The additional code updates your latitude and longitude inputs after adding the last place marker.

You'll need to bear in mind that the SearchBox class' getPlaces method could return multiple entries (with different locations) and only the last place's latitude and longitude will be displayed by the additional code.

The additional code also adds a marker dragend event handler to update your location inputs after any added markers have been dragged to a new position.