Saturday, March 13, 2010

Generating a Google Maps API Key for a Chrome Extension

Usage of the Google Maps JavaScript API requires you to generate a key for the domain you want to show maps in. This in itself is an easy process and no problem. But what to do when you use a chrome plugin and want to show a map in a page that is contained inside the plugin (for example the popup)?

The solution: you have to provide your chrome extension ID to the generator at and prepend http://, else it will be rejected for being an invalid URL.

For a chrome extension, the id can be seen by navigating to chrome://extensions with chrome. If in doubt outside of a chrome extension, a good way to decide what to enter is to follow google's advice and look at the host id by using JavaScript along the lines of

alert("url: "+window.location.host)

This gives you the host name to enter.

Upon entering a valid url, you will be shown several ways to include the Google Maps api into your web page.