Let’s learn something useful today! I have always been interested in data vizualization and my recent addictions to data analysis is pushing me to try new things.
Turns out I have the perfect problem to go with it: having trekked around the globe my wife and I have the pleasure of being invited to weddings all around the world. We try to go as often as we can.
The list for 2013 has been growing very rapidly and it seems it would be quite a challenge to attend all of them. The goal of this little exercise is to:
Let’s build this together.
In this tutorial we will use the latest version of the Google maps API: v3.
Go to the Google API console with your Google Account and enable “Google Maps API v3”.
You can then click on “Google Maps API v3”, go to “API access” and get your API key. If you want (and you should) you can restrict your token to be used only on your domain. Otherwise someone could steal your token and use it on another site (then they could use up the 25000 requests per day that Google grants you for free; or do stuff that violates the google api usage agreement).
key: set to your API key
sensor: set to true if you want to use the device GPS to display the user location
This is pretty straightforward:
Create a global map object:
Create a function to initialize the map:
Make sure this function is called when the page is loaded:
Declare a global variable with your geocoder object
initializeMap() function, instantiate a geocoder.
Notice that we also use
map.panTo() to animate the map to the new coordinate and we use a drop-pin animation. We have also attached an event listener to the pin.
Declare a global Polyline variable and initialize the object in your
Add some code to the geocoder callback to actually add a new point in the polyline.
I have put my data (the list of wedding) in a JSon object in the page and add the weddings one after the other. I have added some jQuery animation to display a list of the wedding on the right on the map. They are clickable, just like the markers.
This was a fun little afternoon project. As I expected it is extremely easy to do some very interesting data vizualization with Google Maps.
As always, please share your comments and feedbacks below!
And I hope you will forgive me if I do not make it to your wedding :(