Creating Click Loggers and Basic Markers with Yahoo! Maps - Review: adding zoom and pan control to a single Yahoo! Map
(Page 2 of 4 )
Before I show you how to create an efficient click detection mechanism for a selected Yahoo! Map, I’d like to review the “addPanControl()” method that you learned in the last article. This came in handy when adding an effective panoramic control to a specified map.
That being said, examine the following code sample, which, as I said before, demonstrates how to incorporate a pan control to a targeted Yahoo! Map:
<!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>
<title>Example on building a YAHOO! Map with pan and short zoom controls</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?
v=3.7&appid=Your-AP-ID"></script>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#mapcontainer{
height: 400px;
width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Example on building a YAHOO! Map with pan and short zoom controls</h1>
<div id="mapcontainer"></div>
<script type="text/javascript">
// Create a new map object
var map=new YMap(document.getElementById('mapcontainer'));
// Add type controls to the map
map.addTypeControl();
// Add the Pan Control to the map
map.addPanControl();
// Add short zoom control to the map
map.addZoomShort();
// Set map type to YAHOO_MAP_SAT
map.setMapType(YAHOO_MAP_SAT);
// Display the map centered on the selected location
map.drawZoomAndCenter("Los Angeles",3);
</script>
</body>
</html>
After analyzing the above example, I will assume that including a pan control into an existing Yahoo! Map is a familiar process, since it only requires using the “addPanControl()” method, which belongs to the pertinent “YMap” JavaScript class that was introduced in earlier articles of this series.
At this stage, I've shown you how to construct maps that are pretty interactive, because they include some additional controls, like the zoom and pan mechanisms. However, any decent geographical mapping application should also incorporate the ability to add basic markers to a map when clicking on it. And certainly the Yahoo! Maps framework is no exception, since it permits you to work with basic and “smart” markers at the same time.
Actually I’m getting ahead of myself. Thus, in the upcoming section, I’m going to teach you how to create an effective click detection mechanism that will come in handy when adding markers to a given Yahoo! Map.
To see how this will be achieved, please click on the link shown below and keep reading.
Next: Building a click logger within a map’s area >>
More JavaScript Articles
More By Alejandro Gervasio
