Creating Click Loggers and Basic Markers with Yahoo! Maps
This is the fourth part of the series “Working with Yahoo! Maps.” If you’re a web developer who’s interested in learning the key concepts surrounding the utilization of Yahoo! Maps within the context of your web applications, then this article series might be for you. In it you’ll find comprehensive examples that will let you put this useful Ajax framework to work for you in a very short time.
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>
<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.