CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Tanjima Tani
Tanjima Tani

Reputation: 580

Get Lat and Long from autocomplete address input and show the map below with google maps API

I have an input field for entering the location which supports location suggestion from google maps API. There are also two input fields for Latitude and Longitude. And the last there is a div for showing the map above input location. Whenever anyone start typing location and select a location from suggestion then automatically and map of the location will be shown in the below div. All should be real-time.

So far i have written the following- 

<input type="text" name="address1" id="address1" class="form-control" required="required" onkeyup="findAddress()" />
<input type="text" name="lattitude" id="cityLat" placeholder="Lattitude" class="form-control" required="required"/>
<input type="text" name="longitude" id="cityLng" placeholder="Longitude" class="form-control" required="required"/>

<div id="showMap"></div>

And the javascript is 

function findAddress() {

var input = document.getElementById('address1');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
}

I have included the maps API 

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

Searching suggestion is working but rest are not working.

Upvotes: 0

Views: 5037

Answers (2)

A.Aleem11
A.Aleem11

Reputation: 1974

Find this piece of code in your script:

if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
}

In this

"window.alert("Locaton: '" + place.geometry.location + "'");"

in "if" condition add the following line it will alert/notify long and lat on option/address select:

Your code will look like this:

if (place.geometry.viewport) {
window.alert("Locaton: '" + place.geometry.location + "'"); //Add this line
map.fitBounds(place.geometry.viewport);
 }

Upvotes: 0

Griffith
Griffith

Reputation: 3217

Not sure if it's what's causing the problem but your JavaScript has syntax errors. You have this:

function findAddress() {

var input = document.getElementById('address1');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
}

But you are not properly closing the addListener. The proper formatting should be:

function findAddress() {

var input = document.getElementById('address1');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();
});
}

Notice the }); at the penultimate line.

Upvotes: 2

Related Questions