Bet I can guess your address! Reverse Geocoding with HTML5 & Google

No, this isn’t one of those bet I can guess your weight or age games you find at places like carnivals and Six Flags. I bet you I can guess your approximate address with HTML and reverse geocoding.

No, this isn’t one of those bet I can guess your weight or age games you find at places like carnivals and Six Flags. I bet you I can guess your approximate address with HTML and reverse geocoding.

Last month I wrote an article on the HTML5 Geolocation API. I’m going to take what I showed you there, expand on it and show you how to take advantage that powerful API and the Google Maps JavaScript API to perform reverse geocoding to find an approximate address.

See it in action!

Turning geographic data like a street address and zip code into geographic coordinates such as latitude and longitude is called geocoding

The process of turning geographic data like a street address and zip code into geographic coordinates such as latitude and longitude is called geocoding. When you do the opposite, turning coordinates into an address, it’s called reverse geocoding. See a live demo below:

I know, I know, it’s not perfect, but it’s a lot closer than we had which at most times was somewhere in the city, state and sometimes just country. And granted, if the user doesn’t allow us to grab their location we’re back to using the IP, but it’s still a pretty good guess. Now only if we could have got Osama Bin Laden to visit one of our webpages while logged on as himself… long shot, but wouldn’t that be awesome if that’s how it went down.


In order to guess your user’s approximate address, just take what we learned in the HTML5 Geolocation Guide to get the user’s latitude and longitude using the HTML5 Geolocation API. Add a little pitch of the Google Maps JavaScript API and BAM! We’ll have a pretty good guess at where their located.

Download Demo Files

The HTML

index.html

All basic stuff, nothing too exciting. Just ensure you load the jQuery library, MaxMind GeoIP API for our fallback and the Google Maps JavaScript API. And of course, the script we’ll write below.

The JavaScript

script.js

A Deeper Look

If you’ve already, I suggest you read my other post on HTML Geolocation to familiarize yourself with 90% of the code above. The rest is fairly simple to understand. You get the coordinates from getCurrentPosition() , then pass them to a printAddress() function, which uses the Google Maps API to perform the reverse geocoding.

The printAddress() function begins by creating a new Google Geocoder object. The Geocoder object gives us access to the geocode() method, which can take in a variety of options and return information based on them.

In this case, we’re using the google.maps.LatLng() method to create a new Google LatLng object that is passed into geocode() in order to get the address. The geocode() method is asynchronous, just like getCurrentPosition(), so we define an inline JavaScript function to handle the callback.

The callback’s response contains two parameters, one for the results and the other for the status code. If the status is OK, then it’s safe to parse the array of GeocoderResults objects stored in the results variable. The results variable is an array since Geocoder may return more than one entry.

Next, check for a GeocoderResults object in the first position of the array and, if it exists, append the formatted_address property to the defined results element.

For more information about reverse geocoding, check out Google’s documentation.

Wrapping Up

screenshot_meetwaysThe possibilities are limitless with what you can do with this functionality. Internet marketers are biting at the bit to start using this technology to drive even better user-specific ads to the eyes of millions. Online game developers like Parallel Kingdom are building ground-breaking web-based massive multiplayer online (MMO) games. With a little extra code, we can turn our code into a mobile app that gives user’s the ability to send their location to a friend or family member with a click of a button. Our imagination has now become the limit with what we can build. The next fives years is sure to be an exciting time in the web development arena bringing the whole world a better internet. Are there any projects you’ve done you can share that use the HTML5 Geolocation API?

Cross-Browser CSS Styled Select Lists Using jQuery

Front-enders won’t be the only ones to rejoice after reading this. I’m going to walk you through how to build a prettyfied cross-browser CSS-styled select lists.

Front-enders won’t be the only ones to rejoice after reading this. I’m going to walk you through how to build a prettyfied cross-browser CSS-styled select lists.

I know for many years web designers have yelled at us front-enders about why we can’t style our site’s select box like the one’s in the mockups they create. With the added rounded corners, customized drop down arrows, gradients, images and more; styling drop down select boxes can become a nightmare for us. Not only is styling them a pain, but different browsers render them differently.

If you’re a pixel perfect coder like I am, I’m sure you share in my frustration trying to make those stupid drop downs look good and the same if the various browsers. Well, hopefully after reading this article you’ll be getting some better sleep at night because I’m going to make styling cross-browser CSS styled select lists using as easy as pie! Ready for some delicious code?

UPDATE (Mar. 18, 2014): Fixed issue where selects would break when more than one appears on the page.

Download Demo Files


Enough with the small talk, let’s get into the code. First we’re going to start off by coding the structure and content of the page.

Step 1: Start with the basics

index.html

Take a look at the markup above. Most of it should be pretty straight forward for the majority of you. There’s one thing that may stick out a little and that’s the use of the data attribute:

  • data-icon, the location of the icon for the specified list element
  • data-html-text, the content that will appear for the list element

Step 2: Build the functionality

script.js

This is where the magic happens. If you’re familiar with jQuery, you should be able to read and understand the markup above. It’s pretty simple and straightforward, nothing too complex.

Basically, we hid the select box and looped through all of the items to generate the rendered HTML content. That content will turn into our styled select box. When someone clicks on the rendered box, the list will slide down with all of the available list items from the hidden select box. Once the user select an item, we update the visible text. Simple stuff!

Now that we’ve got the structure, content and functionality built, we need to make it prettyfied. This is where the power of CSS3 comes in.

Step 3: Make it prettyfied

styles.css

That’s all the styling you’ll need to build this cross-browser CSS styled select list. Of course, you can always embellish it with your own little flair. Just remember to be vigilant about the capabilities of outdated browsers.

The Final Product

CSS3 Styled Select

Browser Support

I made a point to ensure that this method of doing styled select dropdowns would be cross-browser compatible and work with older versions. I’ve testing the code in the following browsers:

  • Google Chrome
  • Firebox
  • Internet Explorer (version 7 and up!)
  • Opera
  • Safari

Let me know if you run into a different browser or a specific version of a browser that this doesn’t work on or comes out a little messed up.


In Conclusion

I’ve demonstrated just one of the many ways to build a cross-browser CSS styled select list using jQuery. I prefer this method because of it’s simplicity and ability to style it however needed. A major bonus is that it’s cross-browser compatible, which many of the styled select box scripts aren’t.

I’d love to see how you’ve incorporated it into your site and any feedback other developers might have.