What is addmap.js?

This is a script that analyses the text content of an HTML element, finds geographical locations and automatically links them to Google Maps. Furthermore, it paints a static map and adds a list of all the locations to the element.

Demo

Currently I am on a working trip in Sunnyvale. I came via San Francisco and I need to go to San Jose later on to return the broken rental car. I'll probably check visit the Facebook guys in Palo Alto afterwards.

Usage

To use addmap.js you need to sign up for a Google Maps API key and embed the script in your document and call the analyse method with the id of the element you want to change as a parameter:

<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
<script>
addmap.config.mapkey = 'YOUR_API_KEY';
addmap.analyse('content');
</script>

View source of this page to see an example, but please get your own key!

Configure addmap.js

You can override a few configuration settings of addmap.js:

Change the look and feel

Addmap creates the following HTML inside the element you enhance:

<div class="locations">
  <img alt="Map" src="…">
  <ul>
    <li><strong>1</strong> first location</li>
    <li><strong>2</strong> second location</li>
    […]
  </ul>
  <p class="branding">Powered by: Google Maps, 
  Yahoo Placemaker and YQL.</p>
</div>

Go nuts styling it.