Mapstraction - demo

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="mapstraction.js"></script>

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

// 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>