Home arrow JavaScript arrow Page 3 - Adding Zoom Controls to Yahoo! Maps

Adding Zoom Controls to Yahoo! Maps

Welcome to the second part of the series “Working with Yahoo! Maps.” As the title clearly suggests, this series provides you with all the elements that you will need to start utilizing the Yahoo! Maps Ajax-based framework. It complements theoretical explanations with numerous code samples. This article will discuss how to incorporate zoom controls into an existing Yahoo! Map.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
April 08, 2008
  1. · Adding Zoom Controls to Yahoo! Maps
  2. · A quick review: building different types of Yahoo! Maps
  3. · Adding a long zoom control to Yahoo! Maps
  4. · Using a short zoom control with Yahoo! Maps

print this article

Adding Zoom Controls to Yahoo! Maps - Adding a long zoom control to Yahoo! Maps
(Page 3 of 4 )

Adding a zoom control to a targeted Yahoo! Map is a procedure reduced to using a brand new method of the already familiar “YMap” JavaScript class, which I used in previous examples, called “addZoomLong()”. In this case, as you might have deduced from the method’s name, it’s tasked with displaying a “long” zoom control to an existing map.

As you’ll see in a few moments, a long zoom control is a simple slider that allows the user to adjust different zoom levels that will be applied to the map in question. Of course, the term “long” implies that this zoom control must have a counterpart, called “short.” It does, but that control will be explained in detail in the next section of this article.

All right, having clarified that point, focus your attention on the following example. It shows how to include a long zoom control into a basic satellite Yahoo! Map.

The corresponding code sample is as follows:

<!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">


<title>Example on building a YAHOO! Map with long zoom control</title>

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.7&appid=Your-

<style type="text/css">


padding: 0;

margin: 0;

background: #fff;



font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;

text-align: center;



height: 400px;

width: 500px;

margin-left: auto;

margin-right: auto;





<h1>Example on building a YAHOO! Map with long zoom control</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


// Add long zoom control to the map


// Set map type to YAHOO_MAP_SAT


// Display the map centered on the selected location

map.drawZoomAndCenter("Los Angeles",3);




See how easy it is to incorporate a long zoom control to a satellite map? I bet you do! In this case, I used the “addZoomLong()” method to incorporate robust zooming capabilities into a satellite Yahoo! map. Naturally, if you’re anything like me, you’ll surely want to see how this control looks. Thus, below I included an illustrative image that shows it in action. Here it is:

There you have it. At this stage, you've hopefully learned how to use the handy “addZoomLong()” JavaScript method to incorporate a long zoom control into an existing Yahoo! Map. However, as I said before, it’s also perfectly possible to include a “short” version of the previous zoom control by using another method of the respective “YMap()” class, which not surprisingly is called “addZoomShort().”

Essentially, this brand new zoom control has the same functionality as its “long” cousin, but it looks pretty different. Therefore, since the control deserves a deeper discussion, in the next section I’m going to show you how to include it into a selected Yahoo! Map.

To learn more about this topic you’ll have to read the next few lines. They’re just one click away.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


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