First Steps with the Google Maps API

This post is part of a series documenting my experience Learning the Google Maps API.

The most basic thing you can do with the Google Maps API is to load a map onto your website that is centered on a custom location and set to your choice of zoom level. But a map by itself is not particularly useful - you probably want to mark the location of something on the map. And you may even want to display some extra information related to those markers. So that is where my journey into the Google Maps API began.

There are some pretty obvious candidates for this type of custom map such as:

• locations of branches in your library service
• a map showing the location of an event, or list of events
• a map of a set of photos from a collection

and I'm sure you can think of many more.

Indeed, here's an example of this type of map on the Sutherland Shire Libraries website, showing the location of all the libraries.

The first thing I set out to do was to hand roll a similar map, using the Google Maps for Designers tutorial as a guide.

First things first

There's 3 distinct concepts required to produce a map such as this.

1. Load a base map at the correct location and zoom level.
   I want to be able to see all the library markers, which are spread across the Sutherland Shire, but I don't want to be zoomed out so far that the markers aren't separated on the map.
2. Load a set of markers, one for each library.
   The latitiude/longitude coordinates must be supplied for the different markers and then the markers are shown on the base map from step 1.
3. Show some extra information to users when they click on a marker.
   In this example I wanted to show the library name, a picture and contact details with a link to more information about the selected library.  These pop-up info boxes are called Info Windows in Google Maps land

While I have hand coded all the information for a couple of libraries as I was learning, if I was producing this type of map in a real world scenario I would be looking to grab this data from somewhere else, allowing the data to be updated independently from the map code. But we'll look at how that might work in a later post.

Stylin' up

I'm sure you are all familiar with the look of a standard Google Map. It turns out, however, that you can customise the colour of almost any part of the base map layer to create your own map.  This is something I didn't know you could do with the API until I started the tutorial.

Fortunately, Google has provided a nifty wizard that lets you define the styles of your custom map and then spits out the JSON code you need to make it work.  The best bit is that you don't need any coding knowledge to play with the wizard. You can have a go at creating a map with custom styles yourself. You can even use the wizard to spit out a Static Map (an URL that display a static image of your map) with your custom style.

So, of course I included a custom styled map in my example.  Here's what I came up with. Not bad for a first crack at using the Google Maps API.

See the Pen Google Maps API test by Martin Boyce (@boycetrus) on CodePen.

You can view this example full screen on Codepen.

One last note…

Before anyone can begin using the Google Maps API they must first obtain an API Key. This is a common requirement on many publicly available APIs. An API allows the service provider to track who is using the API and place limits on the amount of requests a user can make and/or charge for usage above the free limits.  Don't worry, it's free to get a key for the Google Maps API and it's unlikely you'll go over the limit for free access.

So that's the basics of my first Google Maps experiment. In the next post I'll look at creating Map Overlays.