Demo Functions

Example Code

Provider specific code is highlighted below.
<!-- HTML Map element - the size must be specified here, or in the CSS -->
<div id="mapstraction" style="width: 400px; height: 400px;"></div>

<!-- Map Provider & Mapstraction Javascript includes -->
<script type="text/javascript" src="http://developer.multimap.com/API/maps/1.2/OA070606486554191"></script>

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

<script type="text/javascript">
// initialise the map with your choice of API
var mapstraction = new Mapstraction('mapstraction','multimap');

// create a lat/lon object
var myPoint = new LatLonPoint(37.4041960114344,-122.008194923401);

// display the map centered on a latitude and longitude (Google zoom levels)
mapstraction.setCenterAndZoom(myPoint, 10);

mapstraction.addControls({
    pan: true, 
    zoom: 'small',
    map_type: true 
});
// create a marker positioned at a lat/lon 
my_marker = new Marker(myPoint);

my_marker.setIcon('icon.gif');
mapstraction.addMarker( new Marker( new LatLonPoint(37.404,-122.008)));

// add a label to the marker
my_marker.setLabel("<blink>H</blink>");

var text = "<b>South Austin, Texas Rocks!</b>";

// add info bubble to the marker
my_marker.setInfoBubble(text);

// display marker 
mapstraction.addMarker(my_marker);

// open the marker
my_marker.openBubble();

mapstraction.addEventListener('click', function(p) { alert('Mapstraction Event Handling - Mouse clicked at ' + p)  });

ufoo = function() { mapstraction.removeMarker(my_marker); }
</script> 
            

Information

Demonstrations of v2

Old Demos for v1

Old Specific Provider Demos for v1

  1. FreeEarth
  2. Google
  3. Map24
  4. MapQuest
  5. Microsoft
  6. MultiMap Commercial and OpenAPI
  7. OpenLayers
  8. OpenSpace
  9. OpenStreetMap
  10. ViaMichelin (new)
  11. Yahoo