Getting Started with Google Maps Recipes

There are many ways to add a Google Map to a web page. Google offers a variety of map types whose use depends essentially on your needs.

Without taking into account some specific uses (APIs for Places or Earth for example) the types of maps most commonly used are:

• Static Maps and Street View Images


• Embedded Maps


• JavaScript Maps

There are also many web services to improve your map as as well as specific APIs for mobile devices. In this article, we’ll cover only basic APIs for web pages. If you are interested in going deeper with Google Maps, take a look at the Google Maps API main page.

Getting an API key

As explained on the Google Maps Developer site:

All Maps API applications should load the Maps API using an API key. Using an API key enables you to monitor your application’s Maps API usage, and ensures that Google can contact you about your application if necessary. If your application’s Maps API usage exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota”.

You have to request a free API Key (see Google Maps Tutorial: Obtaining an API Key). It allows you to load the map for a defined number of times per day (every API has its specific limit). If you need more traffic, you have to purchase an additional quota (see Google Maps Usage limits).

The API key need for maps is a bit of a confusing question. When Google published v3 APIs, a key wasn’t needed. Now, Google has changed its policy, but for backwards compatibility you can load APIs (not all anyway) without a key (see Google Maps API Faq).

To request an API key, first go to the Google Developer Console page (you must own a Google account), create a new project and activate the APIs you need (you’ll find that some APIs are already active):

Note that sometimes Google Maps documentation redirects you to the previous developer console: despite of the old Google interface. It is the same as the new one.

The recipes illustrated in this article will need the Maps Embed, Maps JavaScript, Static Maps, and Street View Image APIs.

We have now to generate a new public key and, if needed, constrain it to specific domains.

Click on Credential in the left menu, then choose Create new Key in the Public API access section. A dialog will appear where you can choose the Browser key option.

Now you can set one or more http referrers to enable the new key only for them, or (as in this case), simply click the Create button.

Continue reading %Getting Started with Google Maps Recipes%

by Massimo Cassandro via SitePoint