Recently I had the chance to work with a bunch of zip code and area code data. Each code had an associated latitude and longitude – from a list of area codes, I had to find those that were N miles from a specific zip code.
Ultimately the solution didn’t call for a map-style UI, but I had he opportunity to explore the Google Maps API a bit. Here’s a brief overview of the service.
What is it?
The Google Maps API is a service with which you can configure interactive maps and embed them in your web page.
As you can see to the right, you can mouse around the map, zoom, and even drop into street view.
Get an API key
Before you start using the Google Maps API, you’ll need to get an API key. Head over to the Google API console and click on the “Create new Browser key” button. A dialog will open where you can enter restrictions that control which hosts can use the key.
For development purposes, just leave that blank and click “Create” to generate your key. Take note of this key – you’ll need it later when you construct your API calls. Look at the Google Maps API documentation for more information about Google API keys.
One more note on keys: there are restrictions to the frequency of requests you can make to the API – there are also daily limits for some features. Request limit details can be found on the Google Business FAQ.
The most basic example of a Google Map requires three components:
- HTML markup – you’ll need a div tag to house the map
- Optional – CSS to style your page
1 2 3 4 5 6 7 8 9 10 11
1 2 3 4 5 6 7 8 9
This is where the magic happens. First we wait until the page is loaded before calling the API:
Then we get a reference to the HTML element that will contain the map and set up some minimal map options:
1 2 3 4 5
At the minimum, you need to set a center for the map and a zoom-level. In this example, I’m using explicit latitude and longitude coordinates. The Google Maps API includes a geolocation package – you may find that a more intuitive interface to use here.
Finally, we bring the HTML element and the options together – when the page is done loading, you should have a map!
Here is the complete code for this example: Code for this example is up on github.
The map container element is subject to the usual CSS styling rules. You can use styles to format the map’s borders, dimensions, and placement. You can see a demo of this towards the top of this article or click below to demo in a new page.
Aside from street view and birds-eye view (which are also available to the API) Google Maps has four view modes: Satellite, Road Map, Hybrid, and Terrain. This can be set during map initialization as an option:
1 2 3 4 5
This is particularly helpful if you want to set the map type based on an event handler. In this example, we change the map type on a click event:
1 2 3
Note – this example users jQuery to manage the radio button click events.
If you want to manage the map controls yourself, you can disable all map widgets:
1 2 3 4 5
Although the navigation widgets are removed from the map UI, you can still use the mouse to move around the map and zoom in and out.
1 2 3 4
In this example, a marker is added each time you click on the map.
This barely scratches the surface
In this article, we discussed the basics behind the Google Maps API: Getting a key, creating a basic map, setting a few properties, and reacting to events. There is much, much more to explore here. The google maps developer’s guide is comprehensive and covers topics such as: events, layers, overlays, and geolocation. If you’re interested in learning more, check out their guide – it is very detailed.
That’s all for now. If you want to explore this API with me further, let me know and I’ll dive in further in a follow-up post.