The Google Map API is the standard for business websites that need a location map on a contact page. Since many people initially have difficulty undertanding the options, and the set up requirements, I wanted to go over some of the basics here.
Firstly, you need to acquire the latitude and longitude. To do this you go to Google Maps and type in the location address. On the rendered map is a red location icon with an “A”; here you right-click on this icon and you will see a drop-down with the option of “what’s here?”. Click this and you’ll see the lat/long coordinates.
Next you need to decide on is the type of map to use. There is a static map option for websites that lets you embed a Google Map on your web page without requiring JavaScript or any dynamic page loading, and there is the JavaScript type which most dynamic CMS websites offer, or the scripting can be added to a static website. The JavaScript map will allow you to zoom in/out, directions, street view, and a variety of other options based upon the script configuration settings. The static map, while not dynamic, will allow you to define zoom levels, map type, markers, custom icons, etc.
* Note that many websites don’t use an API at all for their Google Map. There is the option on the Google Map page of using an IFrame to display the map, in this case you can define the height/width, and while this does work well enough in many cases, this option doesn’t provide enough features for some, and won’t integrate effectively with most CMS platforms, Mobile sites, and there is longer load time.
Now that you’ve decided on the static or dynamic map, the next step is to get a Google Map API Key. Firstly you will need a Google account (such as GMail), from which you can then sign up for an API key. At this point I should note that on their sign up page there is text that reads:
Google Maps JavaScript API v3
The Google Maps JavaScript API v3 does not require an API key to function correctly. However, we strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application’s Maps API usage.
https://developers.google.com/maps/signup
This sounds great, but from my experience an API key is still needed in many CMS applications that require you to enter the long/lat and the API key to function. In this case, yes, you will need a key, and V2 will need to be assigned to a specific domain.
If you encounter an error message be sure that you have the version in use turned on. For example I recently received the message while adding a Google Map API on a client website on WordPress:
Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#Obtaining_Key
For this website I needed to authorize the Key for V.3.
Upon visiting the link provided above you will see the text that reads:
Obtaining an API Key
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 by exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota.
Note that text that reads there is a “quota” associated with the use of a Google Map, … 25,000 requests a day are free (after this there is a fee associated). The important part of this page is text on how to obtain the key.
To create your API key:
- Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
- Click the Services link from the left-hand menu.
- Activate the Google Maps API v3 service.
- Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
The “console” area does have a couple of aspects that will need configuring. The navigation reads: overview, services, team, api access, billing, reports, quotas.
- Overview will have the project ID which you’ve assigned the key and the email address associated with the account.
- Services provides all of the features available (there are many); for most people I would recommend turning on the Google Maps API V2 or Google Maps API V3 depending upon which MAP script is in place (If the script is before 2011 it is likely V2), and the Static Maps API and the Street View Image API. There are other options, but I have never found a need of them for a Map.
- Team will allow you to add others for account access.
- API Access will provide you the API key, with the option of allowing any referrer, or limiting the referrers to a specific domain/s (see right column).
- Billing, Reports, and Quotas are simply that, … if you owe Google Money.
* If you are unsure if your Map script uses V2 or V3 just turn on both. Also while V2 has been deprecated, scripts that use this version will still work.
If you still have questions following are some links which I’ve used to answer questions.
Obtaining an API Key
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
Google Maps API for Business
https://developers.google.com/maps/documentation/business/guide
Static Maps API V2
https://developers.google.com/maps/documentation/staticmaps/
