HTML example for part 3 of the Mapstraction tutorial
Submitted by wholemap on Thu, 2006-10-05 18:12.
Maps | Sample code | Tutorial | Web programming
<!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">
// As described in the third tutorial at http://www.wholemap.com/blog/mapstraction-tutorial3
// and available online at http://www.wholemap.com/map/zMapstraction-demo2-yahoo.html
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Mapstraction Demo</title>
// In the third tutorial we're calling the Yahoo API
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=(ID)"></script>
// So we no longer need the Google call
// <script src="http://maps.google.com/maps?file=api&v=2&key=AB...-w" type="text/javascript"></script>
<script type="text/javascript" src="../common/mapstraction.js"></script>
</head>
<body>
// For the second example we'll expand the size of the map to 800x600
<div id="simplemap" style="width: <800px; height: 600px"></div>
<script type="text/javascript">
// The only other change we need to use Yahoo rather than Google
var mapstraction = new Mapstraction('simplemap','yahoo');
// Create a point called 'firstPoint' located in the middle of Toronto
var firstPoint = new LatLonPoint(43.671844983221604,-79.38823699951172);
// Display the map centered on the 'firstPoint' we created above, with a Google zoom level of 15
mapstraction.setCenterAndZoom(firstPoint, 15);
// Have the complete set of map controls displayed
mapstraction.addLargeControls()
// We can quickly add a default marker with one line
mapstraction.addMarker( new Marker( new LatLonPoint(43.676035365153986, -79.38673496246338)));
// But using a few lines we can add a much more complete marker
var towerPoint = new LatLonPoint(43.67035499913276, -79.38536167144775 );
var towerMarker = new Marker(towerPoint);
// setLabel is used to indicate the text to display when you mouse over the marker
towerMarker.setLabel("An office tower");
// setInfoBubble is used to assign some HTML to the bubble that pops up when you click on the pointer:
towerMarker.setInfoBubble("An office tower; <a href='http://www.seemsartless.com/index.php?pic=566'>click here to see a picture</a>");
// Use a custom graphic for this marker, rather than the default
towerMarker.setIcon('zDemo-marker.gif');
// We've set all the details for the marker, now add it to the map
mapstraction.addMarker(towerMarker);
</script>
</body>
</html>
