Home arrow JavaScript arrow Page 2 - Creating Click Loggers and Basic Markers with Yahoo! Maps
JAVASCRIPT

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
April 22, 2008
TABLE OF CONTENTS:
  1. · Creating Click Loggers and Basic Markers with Yahoo! Maps
  2. · Review: adding zoom and pan control to a single Yahoo! Map
  3. · Building a click logger within a map’s area
  4. · Adding basic markers on the fly

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials