Playing with google maps api


Few months ago I had a need for building a form that has some address related logic built into it.

The aim was enabling the users to quickly fill in their address form fields, in that manner that they would be interpreted correctly for the persistence layer, meaning all of the address components would be extracted correctly (like country region, city, ….) and placed in appropriate input fields.

So I was playing a bit with the Google Maps API and here is what I ended up with in the initial phase (a thing that I can share).

Please note that the only purpose of this tutorial is to try to expose some code that might hopefully help you learn some parts of that API and maybe help you getting some idea how to address your own problems (in this area).

Brief Code overview

index.html page contains all the html markup that the demo needs.

You will find that I’ve been using Twitter’s Bootstrap framework for styling the demo page.

The JavaScript dependencies are:

  • Google Maps API v3:
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en"></script>
  • jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  • Twitter Bootstrap library:
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  • My custom utility functions for dealing with Google Maps API responses and address form fileds:
<script type="text/javascript" src="../url.google-maps-utils.js"></script>
  • The main demo script, bootstrapping everything:
<script type="text/javascript" src="script.js"></script>

Demystifying source files

I have created documentation for my custom JavaScript files and you can find them here:

Links

Advertisements