Google maps v3 geocoder: callback for latitude and longitude - callback

I can create a Google map that centers on Niwot, CO using geocode. If I click the "Encode" button from the form (which I got from Google's website), it puts a marker on the map in the correct location.
My question is: How do I retrieve the position coordinates (latitude and longitude) using the javascript callback function? I need to put the lat and long into my database.
Also, right now I'm using this for just one place for troubleshooting, but I'll then need it for numerous addresses.
Code is below.
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.171776, -105.116737);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = 'Niwot, CO';//this will eventually be an array
geocoder.geocode( { 'address': address}, function(results) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
//code below added based on comment 1; how do I display that lat and lng? I'll need to do this for troubleshooting.
var latlng = results[0].geometry.location;
var lat = latlng.lat();
var lng = latlng.lng();
});
}

The location returned is an instance of the LatLng class. You can call lat() to get the latitude and lng() to get the longitude. e.g.
var latlng = results[0].geometry.location;
var lat = latlng.lat();
var lng = latlng.lng();
Here are the relevant docs:
http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLng

You can do that inside your geocode call
geocoder.geocode( { 'address': 'CA, US'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
location = results[0].geometry.location;
alert(location)
}
});
This will show the latitude and longitude of the address.
(lat,lng)

Related

How to Convert latitude and Longitude to Address by using Location Plugin in Flutter

I'm using Location library to get the latitude and longitude
https://pub.dev/packages/location
Location location = new Location();
var latitude = "";
var longitude = "";
LocationData _locationData;
_locationData = await location.getLocation();
latitude = _locationData.latitude.toString();
longitude = _locationData.longitude.toString();
But how can i convert this latitude and longitude to address.
Use geocoder :
final coordinates = new Coordinates(latitude, longitude);
addresses = await Geocoder.local.findAddressesFromCoordinates(coordinates);
first = addresses.first;
print("${first.featureName} : ${first.addressLine}");
You can use Nominatim, which is a free open-source geocoding API. It's recommended to setup your own server, but you can use their public API if you abide by their usage policy.

How to use Google Maps location with IP instead of requesting user to access location

Currently I have
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
places.setBounds(circle.getBounds());
});
}
and want to use something like
if (google.loader.ClientLocation) {
var latitude = google.loader.ClientLocation.latitude;
var longitude = google.loader.ClientLocation.longitude;
var city = google.loader.ClientLocation.address.city;
var country = google.loader.ClientLocation.address.country;
var country_code = google.loader.ClientLocation.address.country_code;
var region = google.loader.ClientLocation.address.region;
I would like to use IP address instead of requesting user access.

Getting an ID as well as Coordinates from Leaflet marker on dragend

I am looping through an array and loading markers on a map. I would like to update the coordinates of the array element if the marker is moved.
My code so far is like this:
var m;
for (var i = 0; i < data.length; i++) {
var plateNo = data[i].PLATE_NUMBER;
var trackingNo = data[i].TRACKING_NUMBER;
var inventoryId = data[i].INVENTORY_ID;
if (data[i].INVENTORY_STATUS !== 'Complete') {
var icon = epsMarker.incompleteIcon;
var popup = '<h5>EPS</h5>' + 'Plate:' + plateNo + '<br/>' + '</p>';
m = L.marker([data[i].REF_LATITUDE, data[i].REF_LONGITUDE], {
icon: icon,
draggable: 'true'
})
.bindPopup(popup);
m.on('dragend', function (event) {
var marker = event.target;
var position = marker.getLatLng();
console.log(position);
//Call Database and Update Position by INVENTORY_ID
});
}
}
I can get the Lat and Long but I would also like to get the INVENTORY_ID parameter. The idea is to look up the data on the Database by INVENTORY_ID and then update the lat and long.
I appreciate any help or pointers on this. Thanks in advance...
You could store the ID in your marker as an option or member property so you can later retrieve it:
// Store as option
var marker = L.marker([0,0], {id: INVENTORY_ID}).addTo(map);
console.log(marker.options.id);
// Store as member property
var marker = L.marker([0,0]).addTo(map);
marker.id = INVENTORY_ID;
console.log(marker.id);

Leaflet : Map container is already initialized

The User types some address (Hyderabad,Telanagna) on text field and clicks on Go button
I am fetching the latitude_res and longitude from google Map API as shown below
$(document).on('click', '.gobtn', function(event) {
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '', function(data) {
latitude_res = data.results[0].geometry.location.lat;
longitude_res = data.results[0].geometry.location.lng;
}).done(function() {
});
});
I am able to fetch the latitude and longitude , from google API say for example i got the following values
**17.385044
78.910965**
Then i am making a Ajax call again to fetch all the Markers present at this location in our Database .
And finally initializaing the map as shown below
initializeMap(lator,lonor,markers);
function initializeMap(lator, lonor, markers) {
var map = new L.Map('map_canvas', {
center: new L.LatLng(lator, lonor),
zoom: 5
});
var ggl = new L.Google();
var ggl2 = new L.Google('ROADMAP');
map.addLayer(ggl2);
if (markers.length > 0) {
var markers_leafcontainer = new L.MarkerClusterGroup();
var markersList = [];
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].latitude);
var lng = parseFloat(markers[i].longititude);
var trailhead_name = markers[i].address;
var dealerId = markers[i].dealerID_db;
var dealername = markers[i].dealerName_db;
var contentString = "<html><body><div><p><h2>" + dealername + "</h2></p></div></body></html>";
var marker = L.marker(new L.LatLng(lat, lng), {}).on('click', onClick);
$(".howmanyfound").text(markers.length + ' Found');
markers_leafcontainer.addLayer(marker);
}
map.addLayer(markers_leafcontainer);
map.fitBounds(markers_leafcontainer.getBounds()); //set view on the cluster extent
}
}
Only for the first time this is working , from there on i am getting Uncaught Error: Map container is already initialized.
I am using leaflet with google Maps
So, don't initialize the map inside your function.
var map = new L.Map('map_canvas');
initializeMap(lator,lonor,markers);
function initializeMap(lator, lonor, markers) {
map.setView(L.latLng(lator, lonor));
}

Can someone translate this google.api to a leaflet script?

I want to have this script useable for the leaflet libary to use openstreetmap.
I need a dragable marker which stores it coordinates and on dragend sends it to a hidden form which will be sent to my sqlite database!
im not so good in codeing! help much appreciated
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: mapCenter,
title: markerTitle,
icon: markerImage
});
google.maps.event.addListener(marker, 'dragend', function() {
updateLatLong();
});
google.maps.event.addListener(map, 'click', function(event) {
var myLatLng = event.latLng;
var markerPosition = new google.maps.LatLng(myLatLng.lat(), myLatLng.lng());
marker.setPosition(markerPosition);
updateLatLong();
});
updateLatLong();
}
function updateLatLong() {
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
document.getElementById("nexthh_latitude").value = lat;
document.getElementById("nexthh_longitude").value = lng;
}
It should be something like
var map = L.map();//Set your map options
markerImage = L.icon.Default(); //Change this with your icon options.
var marker = L.marker({
draggable:true,
position: map.getCenter(),
title: markerTitle,
icon: markerImage
});
marker.addTo(map);
marker.on('dragend',function() {
updateLatLong();
});
map.on('click',function(event) {
marker.setLatLng(event.latLng);
updateLatLong();
});
function updateLatLong() {
var lat = marker.getLatLng().lat;
var lng = marker.getLatLng().lng;
document.getElementById("nexthh_latitude").value = lat;
document.getElementById("nexthh_longitude").value = lng;
}
Lealfet has an excellent docs here http://leafletjs.com/reference.html
thx for the help!
i wrote it like this:
var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
.setView([48.20682894891699, 16.370315551757812], 12);
var marker = L.marker([48.20682894891699, 16.370315551757812],{
draggable: 'true',
}).addTo(map);
marker.on('dragend', function(event) {
var marker = event.target;
var lat = marker.getLatLng().lat;
var lon = marker.getLatLng().lng;
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lon;
});