MyMap: A Portable API for Maps
by Lionel Laske

Example 1:

(a)
GEvent.addListener(object, eventname, callback);

(b)
YEvent.Capture(object, EventsLists.value, callback);


Listing One

<!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 Map 
    -->
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAor5up_1nM9SKM8Rp_DseXBSbhcvIRagSHGG9ZRIE7qvWjC5W0hSk4CSCk-m47NJODtlk_qUex2ZeRw" type="text/javascript"></script>
    <script src="scripts/mymap_google.js" type="text/javascript"></script>

    <!-- Yahoo Map
    <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>


Listing Two

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[i].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);
}




3


