get geographical coordinates from address

Question

I ask the user to write an address and I have to show it on a map. I know how to write the script but I don't know how to get the coordinates having the street address. What can I do?

PS: I am using leaflet

Answer 1

First, you will have to include the .js files of a geocoder in the head of your HTML code, for my example, I have used this one: https://github.com/perliedman/leaflet-control-geocoder. Like this:

<script src="Control.Geocoder.js"></script>

Then you will have to initialize the Geocoder in your .js:

geocoder = new L.Control.Geocoder.Nominatim(); Then you will have to specify the address that you are looking for, you can save it in a variable. For example:

var yourQuery = (Address of person);    

(You can also get the address out of your database, then save it in the variable)

Then you can use the following code to 'geocode' your address into latitude/longitude (coördinates). This function will return the latitude/longitude (coördinates) of the address. You can save the latitude/longitude (coördinates) in a variable so you can use it later for your marker. Then you only have to add the marker to the map.

geocoder.geocode(yourQuery, function(results) {    
       latLng= new L.LatLng(results[0].center.lat, results[0].center.lng);
       marker = new L.Marker (latLng);
       map.addlayer(marker);
});

Answer 2

I work for SmartyStreets and we have a service that allows you to obtain the latitude and longitude of an address. If you use this method you need to create an account to get an authentication id/token pair.

var xhr = new XMLHttpRequest();

xhr.onload = function() {
    var addresses = JSON.parse(this.responseText);
    if(addresses.length == 1) {
        var latitude = addresses[0].metadata.latitude;
        var longitude = addresses[0].metadata.longitude;
    }
};

xhr.open("get", "https://api.smartystreets.com/street-address?street=1+Santa+Claus+North+Pole+AK&auth-id=<AUTH-ID-HERE>&auth-token=<AUTH-TOKEN-HERE>", true);
xhr.send();