Exhibit can embed Google Maps to render maps.
One BIG caveat: you need your exhibit to be served through a web server (accessible at an http:// URL rather than a file:// URL) in order for Google Maps to work. We'll try to help you out later but for now, you can try to use the lightweight Java-based Jetty web server and register for a http://127.0.0.1/... URL. Just to clarify, this isn't a problem with Exhibit's architecture; it's a restriction imposed by Google Maps. If we embed some other mapping Web API instead, we might not have this problem at all. Magically, on January 8th, 2007, Google Maps works even for file:// URLs!
Contents |
Registering for Google Maps Key
Google Maps requires that you register for a key in order to embed Google Maps on your web site. Go to Google Maps API - Sign Up and enter the URL of your exhibit page. What you'll get is a long cryptic looking nonsense string which is your Google Maps key, e.g.,
ABQIAAAA5JLLfCE9c7HAtg25QM2KCRSInwI2_sNfg0jsO21_IrKvxRltZxRh2I8AzcAlossU2kGrVtsZsdfDDA
Tutorial: Looking Up Latitude/Longitude
This tutorial shows how you can get Exhibit to look up latitude/longitude from Google Maps automatically (so that you don't have to do it yourself one address at a time).
Start by saving this data into a file named schools.js somewhere that is served by your web server.
{
items: [
{ label: "MIT",
type: "School",
address: "77 Massachusetts Avenue, Cambridge, MA 02139",
subject: "Computer Science"
},
{ label: "Harvard Medical School",
type: "School",
address: "25 Shattuck St., Boston, MA 02115",
subject: "Medical"
},
{ label: "Stanford",
type: "School",
address: "Stanford, CA 94305",
subject: "Computer Science"
},
{ label: "CMU",
type: "School",
address: "5000 Forbes Avenue, Pittsburgh, PA 15213",
subject: "Computer Science"
}
]
}
And then copy this HTML into a file called schools.html in the same directory:
<html>
<head>
<title>Schools</title>
<link href="schools.js" type="application/json" rel="exhibit/data" />
<script src="http://static.simile.mit.edu/exhibit/api/exhibit-api.js?gmapkey="
type="text/javascript"></script>
</head>
<body>
<table width="100%">
<tr valign="top">
<td>
<div id="exhibit-control-panel"></div>
<div id="exhibit-view-panel"></div>
</td>
<td width="25%">
<div id="exhibit-browse-panel"></div>
</td>
</tr>
</table>
<button onclick="getLatLng();">Get Lat/Lng</button><br/>
<textarea id="results" rows="20" style="width: 100%;"></textarea>
<script type="text/javascript">
function getLatLng() {
var database = exhibit.getDatabase();
Exhibit.MapView.lookupLatLng(
database.getSubjects("School", "type"),
".address",
"addressLatLng",
document.getElementById("results"),
database,
4
);
}
</script>
</body>
</html>
You need to change one thing: where the HTML includes exhibit-api.js, put in your own Google Maps key right after gmapkey=.
Then point your browse at schools.html through an http:// URL (don't just drag the file into your browser—that won't work). Notice the big text box at the bottom of the page and the button just above it. Click on the button, and if all goes well, the text box will be filled up with something like this:
{ id: 'MIT', addressLatLng: '42.359,-71.093553' }, { id: 'Harvard Medical School', addressLatLng: '42.335743,-71.105138' }, { id: 'Stanford', addressLatLng: '37.423573,-122.161867' }, { id: 'CMU', addressLatLng: '40.444583,-79.942868' }
Exhibit has retrieved the "address" property values of all items of type "School", looked up the corresponding latitude/longitude pairs through Google Maps, and then generated JSON data into the given text box that will add "addressLatLng" property values to those items. Now all you need to do is copy that JSON data and insert it into the original schools.js file:
{
items: [
{ label: "MIT",
type: "School",
address: "77 Massachusetts Avenue, Cambridge, MA 02139",
subject: "Computer Science"
},
{ label: "Harvard Medical School",
type: "School",
address: "25 Shattuck St., Boston, MA 02115",
subject: "Medical"
},
{ label: "Stanford",
type: "School",
address: "Stanford, CA 94305",
subject: "Computer Science"
},
{ label: "CMU",
type: "School",
address: "5000 Forbes Avenue, Pittsburgh, PA 15213",
subject: "Computer Science"
},
{ id: 'MIT', addressLatLng: '42.359,-71.093553' },
{ id: 'Harvard Medical School', addressLatLng: '42.335743,-71.105138' },
{ id: 'Stanford', addressLatLng: '37.423573,-122.161867' },
{ id: 'CMU', addressLatLng: '40.444583,-79.942868' }
]
}
BE CAREFUL: Make sure you insert a comma before pasting that generated JSON data.
The mysterious number 4 in the Javascript code specifies the accuracy of geocoding lookup as specified by Google Maps. For example, if we changed Stanford's address to only "California", then an accuracy level of 4 will not give any lat/lng for Stanford; we will have to reduce the level to 2.
There is no restriction on what property name to use for the address (so, it doesn't have to be "address") and what property name to use for the lat/lng result (it doesn't have to be "addressLatLng"). You decide what properties to use.
Now that we have the lat/lng pairs, we can just delete the code from <button to </script> in the HTML.
Tutorial: Adding Map View
After you have edited and saved schools.js (not .html), point your browser to schools.js and hit Refresh just to make sure that its previous version isn't still cached.
Then, modify schools.html as follows:
<html>
<head>
<title>Schools</title>
<link href="schools.js" type="application/json" rel="exhibit/data" />
<script src="http://static.simile.mit.edu/exhibit/api/exhibit-api.js?gmapkey="
type="text/javascript"></script>
</head>
<body>
<table width="100%">
<tr valign="top">
<td>
<div id="exhibit-control-panel"></div>
<div id="exhibit-view-panel">
<div ex:role="exhibit-view"
ex:viewClass="Exhibit.MapView"
ex:latlng=".addressLatLng"
ex:marker=".subject">
</div>
</div>
</td>
<td width="25%">
<div id="exhibit-browse-panel"></div>
</td>
</tr>
</table>
</body>
</html>
Remember to put in your own Google Maps key.
Load schools.html in your browser and you should now see a map of the schools with markers color-coded by their "subject" property values. Note that you might see only 3 markers, but there are actually 4. If you zoom in close enough to the marker in Boston, you'll see both markers for Harvard and MIT.
Advanced Settings
More to come... See this for now.
