We Keep Coding

Get address of a location using Geolocation and google maps [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 years ago.
There's a form on my webpage which is supposed to get the address of the user in a formfield.
When the user clicks allow on the location prompt my purpose is to get the address of the user in an input box in the form.
The prompt comes but this code is unable to fetch the address of the user.
I am looking for something like this
Here's my code
HTML
<form id="contact" action="" method="post" align="center">
<fieldset>
<input placeholder="Your Address" id="address" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
Javascript
<script src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script>
$(document).ready(function () {
var currgeocoder;
//Set geo location lat and long
navigator.geolocation.getCurrentPosition(function (position, html5Error) {
geo_loc = processGeolocationResult(position);
currLatLong = geo_loc.split(",");
initializeCurrent(currLatLong[0], currLatLong[1]);
});
//Get geo location result
function processGeolocationResult(position) {
html5Lat = position.coords.latitude; //Get latitude
html5Lon = position.coords.longitude; //Get longitude
html5TimeStamp = position.timestamp; //Get timestamp
html5Accuracy = position.coords.accuracy; //Get accuracy in meters
return (html5Lat).toFixed(8) + ", " + (html5Lon).toFixed(8);
}
//Check value is present or
function initializeCurrent(latcurr, longcurr) {
currgeocoder = new google.maps.Geocoder();
console.log(latcurr + "-- ######## --" + longcurr);
if (latcurr != '' && longcurr != '') {
//call google api function
var myLatlng = new google.maps.LatLng(latcurr, longcurr);
return getCurrentAddress(myLatlng);
}
}
//Get current address
function getCurrentAddress(location) {
currgeocoder.geocode({
'location': location
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0]);
$("#address").html(results[0].formatted_address);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
});

Try this-
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
$(document).ready(function(){
function getGeoLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("address").value = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lang = position.coords.longitude;
var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lang + "&sensor=true";
$.getJSON(url, function (data) {
var address = data.results[0].formatted_address;
document.getElementById("address").value = address;
});
}
});
</script>
The url http://maps.googleapis.com/maps/api/geocode/json?latlng=22.3545947,91.8128751&sensor=true returns address information in JSON format. You want the "formatted_address" of 0 index inside the "result" index of the JSON.
See the JSON file for more information.

In order to start using Google Maps API, you need to include the Google Maps JS file into your script.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
You need to replace YOUR_API_KEY with your own key. You need to generate one for your application.
Get API Key
There is another issue in your code at this line.
$("#address").html(results[0].formatted_address);
The element with id="address" is an input field, so the .html() function is not available on it. You need to use the .val() function. So you can replace that line with the one below.
$("#address").val(results[0].formatted_address);
This should get your code working.

The reason your textfield is not being populated with the address is because of this line in your code:
In "getCurrentAddress" function:
$("#address").html(results[0].formatted_address);
The problem, in this line is that you want to set an input "textfield". In this case you cannot do .html()
You can fix this by changing it to:
$("#address").val(results[0].formatted_address);
Take a look at the following fiddle:
https://jsfiddle.net/ezr6z7so/

display javascript function result in another page

good evening all,
I want to know how to display the import data from page 1 to the view in page 2 calling the function GetRoute() from input .
this is my code :
Html page 1 :
<div> Add Destination</div>
<div>
<input id="travelto" type="text" name="name" value="Oving, UK" />
<input type="button" value="Add" onclick="PushDestination()" />
Tagmere, UK.
Bosham, UK
</div>
<div id="destinations"></div><br />
Source : <input id="travelfrom" type="text" name="name" value="Chichester, UK" /> <br /> <br />
<input type="button" value="Calculate" onclick="GetRoute()" />
html page2
the result will be displayed here in a table in the second page:
<div id="dvDistance">
<table id="tblResults" border="1" cellpadding="10">
<tr>
<th> Start </th>
<th> End </th>
<th> Distance </th>
<th> Duration </th>
</tr>
</table>
</div>
my function from javascript :
function GetRoute() {
directionsDisplay.setMap(map);
source = document.getElementById("travelfrom").value;
destination = document.getElementById("travelto").value;
var waypoints = [];
for (var i = 0; i < locations.length; i++) {
var address = locations[i];
if (address !== "") {
waypoints.push({
location: address,
stopover: true
});
}
}
var request = {
origin: source,
destination: waypoints[0].location,
waypoints: waypoints, //an array of waypoints
optimizeWaypoints: true, //set to true if you want google to determine the shortest route or false to use the order specified.
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var dvDistance = document.getElementById("dvDistance");
var distance = 0;
var minute = 0.00;
response.routes[0].legs.forEach(function (item, index) {
if (index < response.routes[0].legs.length - 1) {
distance = distance + parseInt(item.distance.text);
minute = parseFloat(minute) + parseFloat(item.duration.value / 60);
tbl = document.getElementById("tblResults");
var row = tbl.insertRow(1);
var cell = row.insertCell(0);
cell.innerText = source;
var cell = row.insertCell(1);
cell.innerText = item.end_address;
var cell = row.insertCell(2);
cell.innerText = distance;
var cell = row.insertCell(3);
cell.innerText = minute.toFixed(2) + " min";
}
});
directionsDisplay.setDirections(response);
}
else {
}
})
};
I have to display the result for it to be displayed in the second page, taking the data from the first page .
thnaks,

You can use HTML5 session o local storage:
sessionStorage.getItem('label')
sessionStorage.setItem('label', 'value')
or
localStorage.getItem('label')
localStorage.setItem('label', 'value')
depending on how long you want this results to be stored.

You can use the query string or the hash. Using the hash, you can then remove the hash from the url without refreshing the page. Also, you can use history.replaceState to remove the query string from the url without refreshing.
Here's an example:
http://id0t.x10.mx/StackOverflow/demo2a.html
Use it to get the source.
EDIT:
PAGE 1
<textarea onchange="sendres(myFunc(this.value),'/StackOverflow/demo2b.html');" placeholder="type in me and press enter (or click out of me) to submit!"></textarea>
<script>
function sendres(callback,url){
window.location.href=url+"?"+encodeURIComponent(callback);
}
function myFunc(text){
return text;
}
</script>
PAGE 2
<script>
window.onload=function(){
if((window.location.search.length==0)||(window.location.search.length==1)){
//no query string
document.getElementById("msg").style.display="none";
return;
}else{
res = decodeURIComponent(window.location.search.substr(1));
var url = window.location.origin+window.location.pathname;
history.replaceState({urlPath:url},"",url);
}
alert(res);
}
</script>
<span id="msg">Now, look at the URL. See how it has no query string?<br><button onclick="document.body.parentElement.innerHTML=atob();">Source</button></span>
<button onclick="window.location='/StackOverflow/demo2a.html';">to part 1</button>

we can use a Cookies for store data in it and we can use the data stored with request cookie .

Proper use of ng-submit

I have a form that submits a location to Google's Geocoder and returns the lat/long and changes the map. If I use ng-click on the icon it doesn't work unless I click on it twice. If I use ng-submit on the form it appends to the url and doesn't perform the task. I feel like I'm close to getting this to work but I'm lost as to what I'm doing wrong.
Below is the form
<li>
<form action="" class="search-form" ng-submit="convertLatLonToAddress()">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name">
<i class="fa fa-search form-control-indicator"></i>
</div>
</form>
</li>
And here is the function
$scope.convertLatLonToAddress = function(){
var address = $('#search').val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
// console.log(latitude + ' and ' + longitude);
$scope.center.lat = latitude;
$scope.center.lon = longitude;
}
});
};
Thanks to #PSL it's fixed! See below:
<li>
<form class="search-form" ng-submit="convertLatLonToAddress(searchText)">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">
<button style="visibility: hidden"></button>
<a ng-click="convertLatLonToAddress(searchText)">
<i class="fa fa-search form-control-indicator"></i>
</a>
</div>
</form>
</li>
And
$scope.convertLatLonToAddress = function(searchText){
// var address = $('#search').val();
var address = searchText;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
// console.log(latitude + ' and ' + longitude);
$scope.center.lat = latitude;
$scope.center.lon = longitude;
$scope.$apply();
}
});
};

You need to invoke the digest cycle manually inside the async call of geocode, since geocode does not run inside angular context.
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
// console.log(latitude + ' and ' + longitude);
$scope.center.lat = latitude;
$scope.center.lon = longitude;
$scope.$apply();
}
});
Everytime you click, ng-click triggers the digest cycle so previous cycle runs the non angular async call and updated scope which angular is unaware, when you click on it again it runs the digest cycle again and does the same but that time the values you set previously will be picked and that is why it takes 2 clicks. For ng-submit to execute you need a form element trigger, ex: a button or input type="submit" that causes submit behavior to happen on the form. You should also remove action from form unless you really intend to do a redirection.
Apart from that you can use ng-model on the textbox and pass the value to your function as well instead of getting value from DOM directly.
<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name" ng-model="searchText">
and pass the value via ng-click as ng-click="convertLatLonToAddress(searchText)" and use it inside your function.
In order to avoid scope.apply(); in your controller you could abstract out geoCoder to an angular service and return a promise (creating deferred object) and use that service in your controller.
myApp.service('geoCoderService', ['$q', function($q){
this.getCoordinates = function(address){
var defer = $q.defer();
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
return defer.resolve({latitude :latitude , longitude :longitude });
}
//faliure
defer.reject(status);
});
return defer.promise;
}
});
inject geoCoderService and get data using:
geoCoderService.getCoordinates(address).then(function(coordinates){
//populate it
}).catch(function(errorStatus){ /*ooops Error*/ })

Try this
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.convertLatLonToAddress = function() {
var address = $('#search').val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$scope.lat = results[0].geometry.location.lat();
$scope.lon = results[0].geometry.location.lng();
console.log($scope.lat + ' and ' + $scope.lon);
setTimeout(function(){$scope.$apply();},0)
}
});
};
});
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<li>
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="Search for an address or place name">
<i class="fa fa-search form-control-indicator"></i>
<button ng-click="convertLatLonToAddress()">Click</button>
<br>
Lat : <input type="text" ng-model="lat"><br>
Lon : <input type="text" ng-model="lon">
</div>
</li>
</div>
</body>

Is Google api limit based on ip or page ? client side scripting avoid limit crossing?

In my server i am using some function to find out pickup and drop lat and lang , direction from google map api services,so limit is crossed some days so i have desiede to go with user side scripting to calculate all google api service using following code this will help me ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body onload="geolocate1()">
<input type="text" id="pickup" onFocus="geolocate()" placeholder="Enter your pick up place" />
<input type="text" id="plat" value="" id="plat"/>
<input type="text" id="plang" value="" id="plang"/>
<input type="text" id="pstatuslat" value="error" />
<input type="text" id="km" />
</br>
</br>
<input type="text" id="drop" onFocus="geolocate1()" placeholder="Enter your Drop off place"/>
<input type="text" id="dlat" value="" id="plat"/>
<input type="text" id="dlang" value="" id="plang"/>
<input type="text" id="dstatuslat" value="error" />
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<input type="button" onclick="GetLocation1();GetLocation();calcRoute();" value="Book Now" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script type="text/javascript">
<!--
function GetLocation() {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("pickup").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
document.getElementById('plang').value= longitude;
document.getElementById('plat').value= latitude;
document.getElementById('pstatuslat').value= "ok";
} else {
document.getElementById('pstatuslat').value= "error";
}
});
};
function GetLocation1() {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("drop").value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
document.getElementById('dlang').value= longitude;
document.getElementById('dlat').value= latitude;
document.getElementById('dstatuslat').value= "ok";
} else {
document.getElementById('dstatuslat').value= "error";
}
});
};
//-->
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var autocomplete;
function geolocate1() {
// Create the autocomplete object, restricting the search
var input = document.getElementById('pickup');
var options = {types: ["geocode"],componentRestrictions: {country: 'uk'}};
autocomplete = new google.maps.places.Autocomplete(input, options);
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
function geolocate() {
// Create the autocomplete object, restricting the search
// to geographical location types.
var input = document.getElementById('drop');
var options = {types: ["geocode"],componentRestrictions: {country: 'uk'}};
autocomplete = new google.maps.places.Autocomplete(input, options);
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}
var directionsService = new google.maps.DirectionsService();
function calcRoute() {
var start = document.getElementById('pickup').value;
var end = document.getElementById('drop').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var route = response.routes[0];
var km = parseFloat(route.legs[0].distance.text.replace(" km", ""));
document.getElementById('km').value = km * 0.6214;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

Google API is limited with your Key using. Doesnt matter, if you have the same IP or different, each call to the Google API with you registered Key will be counted.
F.e. using Google Elevation API is limited for 2500 calls each day, doesnt matter, who is calling this, its limited to you API Key.

form.name.value

I am working on an app related to addresses.
I tested my function with hardcoded address like this:
var address = "India Gate , Rajpath, New Delhi, Delhi";
It is working fine.
But now when I am using that function to get adderss from user through a form and using address=form.address.value. Then alert(address) is showing right address (string). But function couldn't work on it (for same address as hardcoded).
Basically I'm using Google Maps API. So is there anyhting special about form.name.value that I should know?
geocoder = new google.maps.Geocoder();
var address = form.address.value;
alert(address);
//var address = "India Gate , Rajpath, New Delhi, Delhi";
geocoder.geocode({
'address': address
}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
alert("hi");
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
addpin(latitude, longitude);
}
});
<form>
Your Name: <input type="text" name="name"/><br/>
Your Email:<input type="text" name="email"/><br/>
Company name:<input type="text" name="company"/><br/>
Street address:<input type="text" name="address"/><br/>
<input type="submit" value="submit" onclick="getlatlong(this.form)">
</form>

form.name reflects to the name attribute of the form element
<form name="form1" />
console.assert(form.name == "form1");
You could use form.elements.name which will be that you want. But in this case, you cannot reach the length named element, because that's the form.elements collection's length.