Mark
December 22, 2016
4:04 am
Programming

JQuery – Getting a Latitude & Longitude from address

I had a client realize today that their dealer search by radius function wasn’t working anymore so I dug in to find out why. The cause turns out to be the service we were using to geocode was no longer functioning which is rational since it was sevceral years old and before yahoo or google was offering geocoding.
Basically they need the dealers address and latitude and longitude to be added to the database so that when a user selects a search radius my coldfusion code does it’s formula which uses the lat & lon. Now the issue was that the lat & lon was no longer being entered into the database so some dealers werent being found… aka problem!
So I searched around and there was not really on info on just getting the lat & lon from an address with google geocoder. The client adds the address into their admin and then it needs to fetch the lat & lon and deposit it into db and that’s why I need to just use an address to get them.
I did find a few demos here and there that would get and display the lat & lon but they all seemed to get it via backend code so that didn’t help and all were straight js and I was hoping for some jquery goodness but nothing….. Turns out it was pretty easy, so I am posting it here so that there is finally something up with jquery as an example.
[code:html]

<!DOCTYPE HTML>
<html>
<head>
    <title>JQuery - Getting a Latitude &amp; Longitude from address</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=<cfoutput>#request.googlemaps#</cfoutput>" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            showLoc();
        });
        function showLoc() {
            var subjectAddress = "721 Thompson Lane, Millville, Ohio 45103";
            var geocoder, subjectAddress;
            geocoder = new GClientGeocoder();
            geocoder.getLocations(subjectAddress,
            function(response) {
                if (!response || response.Status.code != 200) {
                    alert("Sorry, we were unable to geocode the address");
                } else {
                    subjectAddress = {
                        lat: response.Placemark[0].Point.coordinates[1],
                        lon: response.Placemark[0].Point.coordinates[0],
                        address: response.Placemark[0].address
                    };
                    $('#results').html(subjectAddress.address + '<br />Lat: ' + subjectAddress.lat + '<br />Lon: ' + subjectAddress.lon);
                }
            });
        }
    </script>
</head>
<body>
    <p id="results"></p>
</body>
</html>
[/code]

Which produces:
721 Thompson Ave, Millville, OH 45103, USA
Lat: 36.097338
Lon: -86.7834617
Now of course I wouldn’t output that like that I would enter them into db but at least you can see where to grab them from.