javascript/google maps: convert location object to string - javascript

I am trying to find out how to convert the following object from using the google location api into a string
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
The above pulls your location. However, I can't figure out a way to see what it is as a string so that I can work with it. When I alert it, I get undefined and I've tried usual suspect properties and they don't display. I need to find out what it is so I can feed it into the directions service which takes "Boston" or lat lon or similar string an input.

Please refer the below link.
http://jsfiddle.net/y829C/1/
Here you can enter zip code and get the latitude and longitude.
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addresscity }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latitude = results[0].geometry.location.lat();
longitude = results[0].geometry.location.lng();
var myLatlng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Related

How to save the Google map location with mvc

I Want to save my address to database and show them on Google map but I dont want to use latitude and longitude method. Since there is couple of example I seen but most of them asking latitude and longitude to user who will save the data. But assume that the user doesn't know about anything what the latitude and longitudes inputs are and they just want to write down to adres or choose in from Google map? What is the solution for that scenario?
You might wanna take a look at this
Google Geo Coding
Below is a small example , hope you have studied google map API already
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 41.85, lng: -87.65 }// initial coords as default
});
directionsDisplay.setMap(map);
directionsService.route({
origin: Address here ,
destination: Address here,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
directionsDisplay.setDirections(response);

Google Maps Geocode - Results relevance

I am using the basic functionality of Google Maps Javascript API
Code sample from google :
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
So as you can tell, when we type a street name, even if we have several results, the sample above is just showing one. I already changed that to loop throught all results and it works fine.
My questions are:
The geocoder.geocode results are sorted by any criteria?
If the answer is yes, is it possible to get the results sorted by most relevant / near place of the current user location ? (I will pass the current user location).
Thanks a lot
Closest thing that I know off is using region biasing: https://developers.google.com/maps/documentation/geocoding/intro#RegionCodes
You're using the wrong API for this, try using the Google Places API. This sorts by popularity (preferred).
Or you can use some code to loop through the results and find the distance from the original location. Then you can sort by distance (works, but I think popularity is what you want)

Google Maps API - results.geometry.location[0] returning null

fairly new to javascript and trying to make a simple map application. I am trying to center a new map around an address that is passed through a function. The issue I have is it is always being returned null which I do not understand, do I have to specify return types in the function format?
My code:
<script>
var geocoder;
var map;
function initialize() {
var address = document.getElementById('address').value;
var latlng = GetLatLong(address);
alert(latlng);
var mapOptions = {
zoom: 8,
center: latlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function GetLatLong(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert(results[0].geometry.location)
return results[0].geometry.location;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I have a div for the address text and a div for the map location. To debug I put alert("") in some places to see the order in which it gets called on runtime, why would the line I put the first alert be called before the function is called?
Thanks
The Google Maps API call that you are performing is asynchronous. In layman's terms that means that as soon as you start the call, the rest of your program keeps executing independent of it. It is essentially running to the side of the rest of your program. The purpose of the function that you pass to the geocoder call is to deal with the data that the call returns asynchronously.
You would need to change your code to do something like this:
function initialize() {
var address = document.getElementById('address').value;
GetLatLong(address);
}
var map;
function GetLatLong(address) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert(results[0].geometry.location)
var latlng = results[0].geometry.location;
var mapOptions = {
zoom: 8,
center: latlng
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

Google Map Marker from GeoCode a little off

I am pulling is lat long points from a database, combine them, then use reverse lookup to place markers on my map. All the markers get placed on the map, but they are just a little off. I then go to maps.google.com and place the points into the search bar and they work perfectly. Any suggestions? Thank you! The funciton is below:
var lat = resultP[i].get("lat");
var log = resultP[i].get("long");
var latlng = new google.maps.LatLng(lat, log);
geocoder.geocode( { 'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
} //end else
Apologies if I misunderstood something, but I don't see why you need to geocode the coordinates.
Geocoding is the process of turning an address into coordinates, or the other way around. You don't need to geocode your coordinates if you already have them. The whole point of geocoding is to put them on the nearest road.
To display a marker on the map you can just skip the geocoding and do this:
var lat = resultP[i].get("lat");
var log = resultP[i].get("long");
var latlng = new google.maps.LatLng(lat, log);
var marker = new google.maps.Marker({
map: map,
position: latlng
});

Center on a country by name in Google Maps API v3

Would someone tell me how to center on a country by name on the Google Maps API v3? I know how to do it in v2, but need to do it in v3.
You could use Geocoding to lookup the Lat/Lng of the country. Take a look at this sample from Google.
Basically you need to do something like this:
var country = "Germany";
var geocoder;
geocoder.geocode( {'address' : country}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}
});
In your initialize function you'll need to set the value of the geocoder object, like this:
geocoder = new google.maps.Geocoder();
You'd need to workout what an appropriate zoom level would be, and then set that after you have centered the map.
This code working for me:
let geocoder = new google.maps.Geocoder();
let location = "England";
geocoder.geocode({ 'address': location }, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
alert("Could not find location: " + location);
}
});
The only way I know how to do it would be by having a list of the countries and their respective Lat and Lng, with that information known you could use the following code.
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
Out of curiosity, how would you do it in v2?

Categories