Javascript Function - Convert Geolocation Code to Street Address - javascript

I am looking for a javascript function or jquery library to convert geolocation code (e.g. 42.2342,32.23452) to street address
For examples.
navigator.geolocation.getCurrentPosition(
function(pos) {
$("#lat_field").val(pos.coords.latitude);
$("#long_field").val(pos.coords.longitude);
}
);
Here is a google api URL to get address data
http://maps.googleapis.com/maps/api/geocode/json?latlng=41.03531125,29.0124264&sensor=false
I want to see "formatted_address" : "Hacı Hesna Hatun Mh., Paşa Limanı Cd 2-26, 34674 Istanbul, Türkiye",
navigator.geolocation.getCurrentPosition(
function(pos) {
$("#lat_field").val(pos.coords.latitude);
$("#long_field").val(pos.coords.longitude);
$("#adress_data").getaddrfromlatlong(pos.coords.latitude,pos.coords.longitude)
}
);
This function should be how ?
``getaddrfromlatlong()

Try this:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(41.03531125,29.0124264);
if (geocoder) {
geocoder.geocode({ 'latLng': latLng}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].formatted_address);
}
else {
console.log("Geocoding failed: " + status);
}
});
}
</script>

I haven't done it in Javascript but I did something similar using the google maps web service to download XML and parse the data out of it. They also have a JSON interface as well which is likely what you'd want to use. It really is rather trivial (download the data, then grep it) so I don't think you'll need a prewritten library for it.

Related

ESRI TypeError: this.spatialReference is undefined

I'm using Esri GIS to load center location from address. But I use geocoder from google to get longitude and latitude. I'm stuck with this error:
TypeError: this.spatialReference is undefined
Do you have any idea for this problem?
this is my code:
require(["esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "dojo/domReady!" ],
function(Map, Point, SimpleMarkerSymbol, PictureMarkerSymbol, Graphic, GraphicsLayer) {
var point = new Point(0, 0, new esri.SpatialReference({ wkid: gisMap['wkid'] }));
map = new Map(mapHolder, {center: point,zoom: gisMap['zoomlevel']});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': keyword}, 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(longitude+"|"+latitude);
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.centerAt(new Point(longitude,latitude));
console.log(map);
} else {
console.log("No results found");
}
} else {
console.log("Something got wrong " + status);
}
});
});
The issue is in your initialization of the new esri.SpatialReference. You're not actually providing any information -- wkid is short for 'well known ID' and doesn't actually communicate any information to the API.
Since you didn't specify the version of the JS API you're using (3.x and 4.x are quite different), I can't post proper code to show you how it should be done, but these two resources:
https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-SpatialReference.html
and
https://developers.arcgis.com/javascript/3/jsapi/spatialreference-amd.html
should show you how the method should be used!

how can I pass the Google API Key for google.maps.Geocoder().geocode()

Please provide me proper solution for following code
how can I pass the Google API Key
function load_map_from_address(mapid, address) {
// check if gps has been locally cached.
geocoder = new google.maps.Geocoder();
//alert(geocoder);
var geocoderAPIKey = 'geocoderAPIKey ';
geocoder.geocode({ 'address': address }, function (results, status) {
//alert(status);
if (status == "OK") {
var gps = results[0].geometry.location;
create_map(gps.lat(), gps.lng(), mapid);
}
else {
$('#' + mapid).html('<div class="map_canvas_text "><h4>address not found</h4></div>').show();
}
});
}
You can mention it when you include the Google map js . Something like .
Path-to-google-map js?key=yourApiKey
In you're script tag

Reverse Geocoding in Javascript returns MissingKeyMap error

I am trying to get formatted address of customer who access my web page.
For that I wrote function to get lat long and then Reverse geocode it to formatted address.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function coordinates_to_address(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
var geocoder= new google.maps.Geocoder();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
if(results[0]) {
$('#address_current').text(results[0].formatted_address);
} else {
alert('No results found');
}
} else {
var error = {
'ZERO_RESULTS': 'No address'
}
// alert('Geocoder failed due to: ' + status);
$('#address_new').html('<span class="color-red">' + error[status] + '</span>');
}
});
}
navigator.geolocation.getCurrentPosition(function(location) {
console.log(location.coords.latitude);
console.log(location.coords.longitude);
console.log(location.coords.accuracy);
var lat= location.coords.latitude;
var long= location.coords.longitude
coordinates_to_address(lat, long);
});
</script>
The log showed the output lat long
10.8888888888888888
76.43923530000001
40
But this function returned an error:
Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
http://maps.google.com/maps/api/js?sensor=false
Line 34
Is there any easier method to get the formatted address of a lat long?
Keys are now required with the Google Maps Javascript API v3 (but the sensor parameter is not).

Does Google MAP API Use Async Request

I wrote a small app to test out Google Map API and I noticed that my functions do not execcute in the expected order. Please take a look at my code below.
<!DOCTYPE html><htm><head><title></title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<script>
//Global Variables
var lat, lng, _Address;
var geocoder = new google.maps.Geocoder();
function getReverseGeocodingData(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
// Make the Geocode request
geocoder.geocode({ 'latLng': latlng }, function (searchResults,searchStatus) {
if (searchStatus !== google.maps.GeocoderStatus.OK) {
alert("Your search yields " + searchStatus);
}
// Checking to see if the Geocode Status is OK before proceeding
if (searchStatus == google.maps.GeocoderStatus.OK) {
console.log(searchResults);
_Address = (searchResults[0].formatted_address);
alert("First time Address is displayed" + _Address);
}
});
}
function splitAddress() {
var addressArr = _Address.split(',');
//addressArr will be used later
}
// This function is called when the submit button is clicked
function SearchAddress() {
geocoder.geocode({ 'address': "77 Massachusetts Ave, Cambridge, MA 02139" }, function (searchResults, searchStatus) {
var location = searchResults[0].geometry.location;
lat = location.lat();
lng = location.lng();
getReverseGeocodingData(lat, lng);
alert("Second time Address is displayed" + _Address);
splitAddress();
});}
</script></head><body><div><input type="button" value="Submit" onclick="SearchAddress()"></div></body></html>
When I set a break point on the line alert("First time Address is displayed" + _Address), I can tell that this alert function executes before the line alert("Second time Address is displayed" + _Address).
However, the line alert("Second time Address is displayed" + _Address) appears as though it executes first and the value of _Address is undefined. So my question is if the second alert function executes after the first alert function, is Google Map API making an asynchronous request.
Yes, Google Maps API uses asynchronous requests when you call geocoder.geocode.
This is in the documentation.
Accessing the Geocoding service is asynchronous, since the Google Maps
API needs to make a call to an external server.

How to use asynchronous Javascript?

I am using Google maps to get address in mobile application. Code is working fine when there is an internet connection. If not then my app takes 1 minute to load or sometimes it shows an application error. This is due to loading a URL within the script, so I wanted to load my script asynchronously. Can anyone give me some logic to solve my issue, how do I rewrite the below script asynchronously?
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true">
function address()
{
var geocoder ;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(latitude, longitude);
geocoder.geocode({'latLng': latlng}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (results[0])
{
var add= results[0].formatted_address ;
document.getElementById("location").innerHTML="Location : " + add ;
}
else
{
document.getElementById("location").innerHTML="No Results found " ;
}
}
else
{
//document.getElementById("location").innerHTML="Geocoder failed due to: " + status;
//alert("Geocoder failed due to: " + status);
}
});
}
This should do it:
jQuery.getScript('https://maps.googleapis.com/maps/api/js?sensor=true', address);
BTW, getScript() is a helper function for jQuery.ajax(). if you use the latter you can take more control and set more options, specifically a timeout parameter so it does not just spin for ever or the cache parameter so that you don't have to look it up all the time
A fiddle that's similar. Sorry fiddles can't use external resources directly so I have to create a simpler script request but you can see the callback is referencing the new javascript.

Categories

Resources