I am using Ti.map module.
Now I would like to change address to latitude and longitude to
set the annotation pin.
Like when you type the address in google map serach box
I think it is very simple function though I can't find the way to do this in Ti.map document??
Could someone help me??
You can use Google API to do this :
var v = encodeURIComponent("YOUR ADDRESS HERE");
var xhr = Titanium.Network.createHTTPClient();
xhr.autoEncodeUrl = false;
xhr.onload = function(e){
if (xhr.status == 200 ){
if(xhr.readyState == 4){
var response = JSON.parse(xhr.responseText);
}
}
};
xhr.onerror = function(e){};
var url = 'https://maps.googleapis.com/maps/api/geocode/json?address='+v+'&sensor=false';
xhr.open('GET', url, true);
xhr.send();
And if you want the address from your latitude / longitude, you can use Ti.Geolocation.reverseGeocoder() method : http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Geolocation-method-reverseGeocoder
Why not use the built in GeoLocation services? http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Geolocation
Look at the forwardGeocoder method.
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Geolocation-method-forwardGeocoder
Related
I'm letting users add an address to their posts using Google Maps.
If a user enters nothing for the map or enters odd special characters (#$!##) it crashes the website and gives me this error:
var lat = data.results[0].geometry.location.lat;
^
TypeError: Cannot read property 'results' of undefined
I'm trying to figure out a way to check for this error when the form is submitted. So far I have had zero luck. Is it possible to check for this error?
I've seen code like this but everything in undefined and I'm not sure how to define it in this case and frankly I'm not sure how the code below is operating.
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat();
var lon = results[0].geometry.location.lng();
searchStores(lat, lon);
} else {
$addressErrorP.removeClass('hide');
}
Thanks for any help!
Figured it out: Simple and works perfectly.
Step 1: Make sure this is on your page.
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
Then
$('#checkingAddress').click(checkGeocode)
function checkGeocode() {
var addr = document.getElementById('location')
// Get geocoder instance
var geocoder = new google.maps.Geocoder()
// Geocode the address
geocoder.geocode({ address: addr.value }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK && results.length > 0) {
alert('looks good')
// set it to the correct, formatted address if it's valid
addr.value = results[0].formatted_address
// show an error if it's not
} else alert('Invalid address')
})
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiv004_zrkpEL-v1u-LU6QYIkgv7yjT_M&language={{ Lang::getLocale() }}&libraries=places&" />
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var options = {
types: ['(cities)']
};
var places = new google.maps.places.Autocomplete(document.getElementById('location'));
var inputLat = $("input[name*='lat']");
var inputLng = $("input[name*='lng']");
var inputPlaceId = $("input[name*='place_id']");
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var address = place.formatted_address;
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var placeId = place.place_id;
inputLat.val(latitude);
inputLng.val(longitude);
inputPlaceId.val(placeId);
});
});
$('#location').keypress(function(e) {
if (e.which == 13) {
google.maps.event.trigger(autocomplete, 'place_changed');
return false;
}
});
</script>
I need it to display only cities, but somehow I get countries too.. I don't want to display continents and countries. please help
If you check the autocomplete documentation, it is stated here that:
the (cities) type collection instructs the Places service to return
results that match either locality or administrative_area3
So like you have done, you need the cities as types parameter.
What you can do is to specify the country in the Google API call with a help of region parameter. Just check this tutorial on how to do that.
Here is the sample request:
= javascript_include_tag "http://maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=places®ion=UK"
For more information, check this related SO question it may give you an idea on how to solve this issue.
Google maps Autocomplete: output only address without country and city
Is there a way to get only the city name from Google Places API instead of getting the whole location?
I'm trying to get lat long coordinates from an address using the Google maps api v3 in Wakanda Studio. I have submitted to the Wakanda forum as well. I searched the v3 documentation as well, which basically advises to pass a JSON object and a call back function to geocode, which is displayed in the code below.
The geocode call is also encapsulated in the codeAddress function. When I run the code, I can see the Geocoder JSON object results that include the lat long coordinates. However, I am getting a strange error message:
Uncaught Error Type: Object #<Object> has no method 'apply'
Any pointers would be appreciated, and let me know if you need to see screenshots/details of anything else emailed, since I cannot post screenshots on stack overflow yet.
button1.click = function button1_click (event)
{
$$('map').setCenter("London, England");
var address1 = "911 South Park Street, Kalamazoo, MI, 49001";
geocoder = new google.maps.Geocoder();
if(!geocoder) {
alert("no geocoder available");
} else {
alert("geocoder available");
}
codeAddress(address1);
};
function codeAddress(address) {
var address1 = address;
geocoder.geocode(
{'address': address1},
{onSuccess: function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//setCenter to mid
//addMarker
var lat = results[0].geometry.location.lat;
var lon = results[0].geometry.location.lon;
alert(lat);
} else {
alert("geocoder issue " + status);
}
}
});
}
I also tried something similar in Wakanda, but it seems the browser is blocking the call due to CORS (cross-reference of domains), so I used the below approach.
Wakanda client --> Wakanda Server --> Google Maps API --> Back to Wakanda Server --> Back to Wakanda client
Client side code:
button1.click = function button1_click (event) {
var address = $$("addressField").getValue();
address = encodeURI(address);
// Make call to server
response = $sources.businesses.getGeoCoordinates(address);
address_info = JSON.parse(response);
if (address_info && address_info.status === "OK") {
$$("business_latitude_field").setValue(
address_info.results[0].geometry.location.lat
);
$$("business_longitude_field").setValue(
address_info.results[0].geometry.location.lng
);
alert('We got latitude & longitude of your address.');
} else {
alert("Could not find latitude and longitude of your given address.");
}
}
Server side code - Code of getGeoCoordinates public method in business data class
function (address) {
// Call google geocode service to convert given address into lat / long
if (address) {
var api_url = "http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + address;
xhr = new XMLHttpRequest();
xhr.open("GET", api_url);
xhr.send();
var response = xhr.responseText;
return response;
}
}
Hope it helps.
I am using Google geocoder for lat and lon and my question is, is there a way you can find out zipcode with latitude and longitude?
It's good to note that Google Maps has a new version since this solultion was presented.
Reference: https://developers.google.com/maps/documentation/geocoding/?csw=1#ReverseGeocoding
Here's an updated example for Google Maps v3. It makes use of the Address Components that JIssak mentions above. I should note that there is no fallback. If it fails to find a zip code, it does nothing. This may or may not be important to your script.
var latlng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
for (j = 0; j < results[0].address_components.length; j++) {
if (results[0].address_components[j].types[0] == 'postal_code')
alert("Zip Code: " + results[0].address_components[j].short_name);
}
}
} else {
alert("Geocoder failed due to: " + status);
}
});
I think what you are looking for is the address_components[] in the results array. Maybe something like this would work, just typing the below so it might have errors in it but I think you will get the idea.
http://code.google.com/apis/maps/documentation/geocoding/#Results
function (request, response) {
geocoder.geocode({ 'address': request.term, 'latLng': centLatLng, 'region': 'US' }, function (results, status) {
response($.map(results, function (item) {
return {
item.address_components.postal_code;//This is what you want to look at
}
}
[Removed non-working solution for google - see #hblackorby's solution.]
Here's a version that uses openstreetmap.org, much simpler than google's api - coffeescript, then javascript:
getZip = (cb) ->
# try to populate zip from geolocation/google geocode api
if document.location.protocol == 'http:' && navigator.geolocation?
navigator.geolocation.getCurrentPosition (pos) ->
coords = pos.coords
url = "http://nominatim.openstreetmap.org/reverse?format=json&lat=#{ coords.latitude }&lon=#{ coords.longitude }&addressdetails=1"
$.ajax({
url: url,
dataType: 'jsonp',
jsonp: 'json_callback',
cache: true,
}).success (data) ->
cb(data.address.postcode)
Here's the compiled javascript:
getZip = function(cb) {
if (document.location.protocol === 'http:' && (navigator.geolocation != null)) {
return navigator.geolocation.getCurrentPosition(function(pos) {
var coords, url;
coords = pos.coords;
url = "http://nominatim.openstreetmap.org/reverse?format=json&lat=" + coords.latitude + "&lon=" + coords.longitude + "&addressdetails=1";
return $.ajax({
url: url,
dataType: 'jsonp',
jsonp: 'json_callback',
cache: true
}).success(function(data) {
return cb(data.address.postcode);
});
});
}
};
Use it like this:
getZip(function(zipcode){ console.log("zip code found:" + zipcode); });
Yahoo's PlaceFinder API provides a good wat to lookup location data by lat/lng:
http://developer.yahoo.com/geo/placefinder/
Here's an example url that they use:
http://where.yahooapis.com/geocode?q=38.898717,+-77.035974&gflags=R
It would seem so:
Source: Google Maps API Service
Geocoding is the process of converting addresses (like "1600
Amphitheatre Parkway, Mountain View, CA") into geographic coordinates
(like latitude 37.423021 and longitude -122.083739), which you can use
to place markers or position the map. The Google Geocoding API
provides a direct way to access a geocoder via an HTTP request.
Additionally, the service allows you to perform the converse operation
(turning coordinates into addresses); this process is known as
"reverse geocoding."
You should also check out this documentation which has some sample code:
Reverse Geocoding
I made a generic function to look for the type that you want. Not always the address_component has zipcode, country, etc and if they do not always are in the same index. Sometimes your array is lenght 8, 6 or whatever. I did it in Typescript, just change a few things to make it vanilla JS.
getPlaceTypeValue(addressComponents: Places[], type: string): string {
let value = null;
for (const [i] of addressComponents.entries()) {
if (addressComponents[i].types.includes(type)) {
value = addressComponents[i].long_name;
break;
}
}
return value;
}
OR
getPlaceTypeValue(addressComponents: any[], type: string): string {
return (addressComponents.find(({ types }) => types.includes(type)) || {}).long_name || null;
}
Example of usage:
this.placesService.getPlaceTypeValue(address.address_components, 'postal_code');
this.placesService.getPlaceTypeValue(address.address_components, 'country');
Hitting a page with the follow script displays:
lat: undefined
lon: 51.5001524
Why is it that while lat is undefined, lon is not?
A working example can be found here.
Pull up your web console and see for yourself!
$(document).ready(function(){
var geocoder;
function codeAddress()
{
geocoder = new google.maps.Geocoder();
var address = 'London, England';
geocoder.geocode({'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
lat = results[0].geometry.location.Ia;
lon = results[0].geometry.location.Ja;
console.log("lat: " + lat);
console.log("lon: " + lon);
}
});
}
codeAddress();
});
</script>
</head>
<body>
</body>
</html>
While we're at it - what is the historical significance of Ia and Ja? I presume it relates to the Cartesian unit vectors i and j (predominately used in Engineering) though I'm not sure.
I found other examples online who use .lat for .Ia and .lng for .Ja
These, however, are returning in the console:
function () {
return this[a];
}
Just need a kick in the right direction.
Thank you.
I would use lat() and lng():
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
This is a designed behaviour of the geocoder: google shifts the identifiers in
geometry.location.Ia;
geometry.location.Ja;
on a weekly basis, i.e. from above to
geometry.location.Ja;
geometry.location.Ka;
and so on, so it is not possible to refer by id to the geocoder result object.
Chances are Google are using a javascript minifier (e.g. http://jscompress.com/) which renames all variables - hence they're subject to change on every build.