Monday 22 February 2016

Learning the Google Maps API


I've been working on library websites for a long time but as a self taught coder JavaScript has been my stumbling block.  My HTML and CSS skills have allowed me to do most of what I wanted over the years but increasingly of late I have found myself dipping my toes in to the JavaScript waters to get certain things done.

It was high time I got a bit more proficient in JS land and over the last year or so I have taken a more structured approach to tying to teach myself the language.  I've been learning a lot. Part of the what has driven me to learn this stuff is the potential I see in some of the APIs available from different web services that can benefit libraries.

I've held the view for some time that the future of public libraries relies in part on their collection of uniquely local materials - maps, photos, local newspapers, etc.  In most cases, this material is not available anywhere else; the library has a monopoly on its distribution. There are some very interesting examples of libraries using web services and their APIs to showcase their local collections.

And that is where the Google Maps API comes in. Every time I look at some of the material my library has been digitising from our local studies collection I start thinking about how a map based discovery interface would be interesting and useful. Of course, that isn't a new idea and many libraries have done interesting things with maps. It wasn't until now, however, that I've had enough of an understanding of javascript to be able to tackle the Maps API documentation.

So I am putting together a couple of posts about my experience learning how to use the Google Maps API, showcasing a couple of the experiments I have created.

I relied heavily on the Google Maps API for Designers learning guide from Tuts+.  Interestingly, not everything in that tutorial works perfectly as described but in hindsight I think that was ideal.  By troubleshooting some of the parts that weren't working I had to delve into the API Documentation and sample code from Google.  This definitely gave me a much better understanding of what each piece of the code was doing. It allowed me to strip back the code from the tutorial and really try and write lean code.  If necessary I can layer the prettys on later to enhance the user interface.

So over the next week or so I will be adding a couple of posts that document my journey.

Custom Maps

Map Overlays

Flickr Mashup


If you want to jump ahead and see what I made you can see my collection of Google Maps API experiments on Codepen.


No comments:

Post a Comment