Igor's Blog

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

, , , ,
About — I'm an enthusiastic software engineer and consultant interested in many fields including J2EE, programming, electronics, 3D printing, video games, wood working and gardening.
See my Resume for more information.
The views expressed in this blog are my own and not those of my employer.
comments powered by Disqus
My other posts you may like...
Programming, DIY, Games, Hacks, Tech and more.
Follow me on...
Current and Past Projects
See my Resume

Subscribe


RSS Feed

My Other Web Sites

Igor and Elise's Travels
Riverside Expressway Cam
StrFunc() Online
300 George St Blogumentary
Guru JSON-RPC Tester
Extrudifier Object Designer

Recent Blog Posts

Older versions of JD-GUI crashing on macOS Sierra

How does Seeed Fusion stack up as a low budget PCB fab

Where to find the last item (Robbie's lost lyrics) in GravityFalls Lake level

Detecting print requests to print contents of a DIV with JavaScript

Using Google DFP with AdSense on responsive pages

How to change the email subject line in Gmail

Force PHP GD library to load JPEG images that have invalid data

How to uninstall Samsung Smart Switch from your Mac

Facebook adds weather forecasts but forgets to adjust them to your time zone

No sound or microphone when answering calls on an iPhone

Recent Galleries

Space Food - Chocolate Ice Cream with Chocolate Chips

Legeod Star Wars AT-DP kit

DIY spare parts computer build with a RAIDMAX Anura case

Fake 'Lepin' brand Lego packaging

Hardwood garden bench with clear resin void filler

Fixing a 3D printer extruder that stopped heating up

Easily increase disk space in a Lenovo Ideapad 100S 14" laptop with an M.2 SSD

Making a multi-piece 3D printed solder spool holder stand

DIY indoor apartment grow light wiring

Good Friday Electronics fun Easter Bunny LED PCB Kit IBEABU-01.0

Top Categories

Blogs I follow

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth

Friends

RAWS Parts Online
Alpha Dimensions Hosting
Kristensen Photography
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity
Follow me on... 
     
...or subscribe for updates!

Don't show this again