Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

Google Places Autocomplete is an excellent addition to a web application that needs to have its users enter a location. I've been using this API quite a bit on my travelblog.ws project and have written about ways of implementing it with jQuery. This article shows how I am passing around the latitude/longitude coordinates that Autocomplete returns so that I can make use of them in other parts of my code.
googlautocmplt.png


The issue I was trying so solve was that I needed geographic coordinates for a Place. The Places API of course lets you look this up, but that's a separate query and hence another round-trip to Google's servers. It turns out that when you get a Place via Autocomplete, it already has these coordinates. So instead of looking them up later all I had to do was store them somewhere.

The trick to getting hold of this data was adding an event listener for the 'place_changed' event and then storing it as user data into the input element that has Autocomplete enabled.

This is what the code looks like (see my earlier article I linked above for details on why there is an .each() call)...
 JavaScript
$(document).ready(function() {
if (typeof(google) != 'undefined') {
var options = {
types: ['(cities)']
};
$('input.loc_autocomplete').each(function(idx, el) {
var autoComplete = new google.maps.places.Autocomplete(el, options);
/* add a reference back to the input element */
autoComplete.inputEl = el;
/* add event listener */
google.maps.event.addListener(autoComplete, 'place_changed', function() {
var loc = this.getPlace().geometry.location;
/* store the location as user data */
$(this.inputEl).data({lat: loc.lat(), lng: loc.lng()});
});
});
}
});




The code is more or less the same as what I've shared in my previous article, with a few additions. On line 11 I create a reference back to the input element for which I am adding Autocomplete for. This is required to store the user data inside the listener.

Lines 14-18 have the event listener. This code gets the coordinates of the Place and adds them to the original input element's data attributes.

To access these coordinates later, all I have to do is look up its data()...
 JavaScript
var coords = $(myInput).data();
console.log('Latitude: ' + coords.lat);
console.log('Longitude: ' + coords.lng);


-i

Please leave your comments or feedback below!
comments powered by Disqus
Other posts you may like...
Hi! You can search my blog here ⤵
Or browse the recent top tags...

Recent Blog Posts

How to stop macOS adding shadows to window screenshots

How to run Atari Lynx games on the SNES Classic Mini

Maven dependency scopes with relation to WAR file packaging and the WEB-INF/lib directory

Hacking the Sonoff B1 WiFi LED bulb to run custom firmware

What does an idle WebLogic server run on the hour to cause a CPU spike

How to open the Sonoff B1 wifi LED bulb to access its internal circuitry

Australian release SNES mini classic unboxing and a quick play through

Troubleshooting high CPU usage for JVM threads

How to fix WebLogic high CPU usage due to a corrupted file store

Mini review of the Sonoff B1 WiFi light bulb

Recent Galleries

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 1 - introduction and case disassembly

Building a custom Atari Lynx game box storage shelf unit in a day

Protecting old Atari Lynx game boxes with snug fit plastic sleeves

Monument Valley 2 is released and does not disappoint

Space Food - Chocolate Ice Cream with Chocolate Chips

Legeod Star Wars AT-DP kit

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity