MyMap In Action
Listing One is a basic HTML page using MyMap. This example just displays a map at zoom level 6, in "road mode." A marker is placed in the center of the map. To choose the map provider Google Maps, Yahoo Maps, or Virtual Earth, you just need to remove the JavaScript comment around the appropriate include statements. Two include statements are needed—one for the JavaScript of the map provider, and another for the corresponding MyMap API. A better way could be to include the JavaScript for the provider in the MyMap API file, but a simple task such as including a file in another file is not trivial in JavaScript. Furthermore, most of the AJAX frameworks provide one such implementation and a real application could dynamically generate these includes in the web server logic.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>MyMap Sample 1</title>
<!— Google Maps
—>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAor5up_1nM9SKM8pR _DseXBSbhcvIRagSHGG9ZRIE7qvWjC5W0hSk4CSCk-m47NJODtlk_qUex2ZeRw" type="text/javascript"></script>
<script src="scripts/mymap_google.js" type="text/javascript"></script>
<!— Yahoo Maps
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=YahooDemo"></script>
<script src="scripts/mymap_yahoo.js"></script>
—>
<!— Virtual Earth
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script src="scripts/mymap_vearth.js"></script>
—>
<script type="text/javascript">
function load() {
MyMapInitialize("map", 48.786290, 2.057517, 6, MYMODE_MAP);
MyMapAddMarker(48.786290, 2.057517, MYMARKER_TYPE1, "<B>I'm here!</B><BR/>");
}
function unload() {
MyMapTerminate();
}
</script>
</head>>
<body onload="load()" onunload="unload()">>
<div id="map" style="position:relative; width: 600px; height: 400px"></div>
</body>>
</html>
Google Maps not only references a JavaScript file, but also an encrypted value named "key." This value must be generated by filling in a form on the Google Maps web site. To get this value, you must provide the URL of your web site so that the Google Maps JavaScript checks whether the URL is only used from your web site (or from a local file; for example, "file://..."). Yahoo Maps uses a similar registration process with an "appid" but does not check from where access comes. Registration is not needed for Microsoft Virtual Earth.
Figure 1 is MyMap in a real application. This sample shows JavaScript interaction between the map and the HTML form's radio button and listbox. Moreover, this sample gives a way to dynamically switch between map providers. The application is the official roadmap Santa Claus visits on December 25, 2006. The map shows markers for some famous good and bad boys all around the world. Of course, only good boys were visited by Santa Claus. Listing Two is the JavaScript source code linked to the HTML page. It uses MyMap functions only (no provider-specific function calls).
var guys = [
{ "lat": 48.786290, "lng": 2.057517, "is": "Good", "name":"Lionel Lask\351", "company":"C2S" },
{ "lat": 43.578394, "lng": 1.495859, "is": "Bad", "name":"Sami Jaber", "company":"Valtech" },
{ "lat": 44.261882, "lng": 4.199038, "is": "Bad", "name":"Yacine Chahrour", "company":"Lygue" },
{ "lat": 37.53736, "lng": -122.326571, "is": "Good", "name":"Jon Erickson", "company":"Dr. Dobb's Journal" },
{ "lat": 47.639557, "lng": -122.128336, "is": "Good", "name":"Bill Gates", "company":"Microsoft" },
{ "lat": 37.416987, "lng": -122.025135, "is": "Bad", "name":"Terry Semel", "company":"Yahoo!" },
{ "lat": 37.421690, "lng": -122.084594, "is": "Good", "name":"Larry Page", "company":"Google" }
];
function load() {
MyMapInitialize("map",42.81152174509788, -49.5703125, 2, MYMODE_MAP);
for (i=0; i<guys.length; i++) {
guys[i].marker = null;
print(i);
var newopt = document.createElement('option');
newopt.text = guys[i].name;
newopt.value = i;
try {
document.getElementById("list").add(newopt);
}
catch(e) {
document.getElementById("list").add(newopt, null);
}
}
}
function unload() {
MyMapTerminate();
}
function filter(is) {
for (i=0; i<guys.length; i++) {
if (guys[i].is == is)
hide(i);
else
print(i);
}
}
function print(index) {
var person = guys[index];
if (person.marker != null)
return;
var markertype = MYMARKER_TYPE1;
if (person.is == "Bad")
markertype = MYMARKER_TYPE2;
guys[index].marker =
MyMapAddMarker(person.lat, person.lng, markertype, "<B>"+person.name+"</B><BR/>"+person.company);
}
function hide(index) {
var person = guys[index];
if (person.marker != null) {
MyMapRemoveMarker(person.marker);
person.marker = null;
}
}
function gotoselected() {
goto(document.getElementById("list").value);
}
function goto(index) {
var person = guys[index];
MyMapSetZoom(12);
MyMapGoto(person.lat, person.lng);
}
As you can see at the beginning of the program, all markers are stored as objects in an array named "guys." The "guy" object is initialized at startup with all existing guys described in JSON (JavaScript Object Notation). The sample has just a few HTML and JavaScript pages so it could work without a web server. But of course, it's possible to replace the JSON initialization directly in the script by something like a web service call (it's precisely what JSON was created for).
The MyMap API is initialized in the load function, then a marker is created with MyMapAddMarker for each person. These are all added to the HTML list for which we handle the selected item event.
MyMapRemoveMarker and MyMapAddMarker are used when filtering the persons to display on the map.
Finally, when the selected item event is raised by the listbox, MyMapSetZoom and MyMapGoto are used to move the map to the chosen boy.
This sample was tested on Google Maps, Yahoo Maps, and Microsoft Virtual Earth both on Internet Explorer and Firefox.
