Introduction

You can find small examples of creating a map, adding a marker etc in subversion for google, yahoo and microsoft.

First Map

To embed a map using Mapstraction is similar to any of the other major mapping providers. There are three parts: 1. Include Map Javascript libraries 1. Add Map HTML in web page where you want the map 1. Add Javascript calls to place map in the HTML

Include Libraries

To include the library for the maps you will want to use, put the appropriate line in your <head> section of your HTML page:

Yahoo Map 

 <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=YOUR_YAHOO_APP_ID"></script>

Google Map 

 <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_GOOGLE_KEY" type="text/javascript"></script>

Microsoft Map

forthcoming...

Map24 Map

forthcoming...

and finally you'll need to include the Mapstraction library: 

  <script type="text/javascript" src="http://mapstraction.com/js/mapstraction.js"></script>

Include HTML

You need to specify where you want the map to be in your page, so include an HTML element with an id and size: 

 <div id="map" style="height: 200px; width: 400px;"></div>

Javascript

Now that you have the libraries, and the HTML, you can actually create your map. Because some of the mapping libraries need the page to load before they'll display properly, we will use a body onload function to create the map and add any markers.

Add the following to your <head> section and then make sure to call the function in your body onload declaration as show below. 

  <script type="text/javascript" charset="utf-8">
    function loadMap() {
      var mapstract = new Mapstraction('map','google');
      mapstract.setCenterAndZoom(new LatLonPoint(42.4365,-83.4884),2);
    }
  </script>

  <body id="main" onload="loadMap();">

That's it, you now have a map. As you can see, just switch 'google' in the new Mapstraction() call to 'yahoo', 'microsoft', 'map24', 'openlayers', or any of the other supported mapping libraries.

See the API reference and other examples for how to add markers, polylines, polygons, overlays, markers, and info bubbles.

API Reference

Please have a look at the auto generated documentation. We aim to be 100% documented, so please bug the mailing list if something is missing :-)

Tutorials

See this tutorial at WholeMap.

The O'Reilly Shortcut Introduction to Neogeography gives an overview and examples of using Mapstraction in a site. It also covers other important information such as KML, GeoRSS, GPX, geocoding, and so on.