Home arrow JavaScript arrow 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
(Page 1 of 4 )

These days, the web has plenty of sites that use a huge variety of Ajax-based applications to keep their visitors engaged. And you can ride this exciting wave effortlessly if you learn how to incorporate Yahoo! Maps into your own website. However, to dig into the depths of this topic, you’ll need to have a step-by-step guide. So don’t waste your valuable time; start reading this article series!

If you already read the first article of the series, it's time to recapitulate the topics that were discussed in that particular tutorial. Doing so will give you a much clearer idea on how these items can be linked with the ones that I plan to cover in this second installment.

You’ll surely recall from the last article that I explained how to build the three basic types of maps supported by this Yahoo! Ajax framework (i.e. regional, satellite and hybrid respectively) by using the “YMap” JavaScript class in conjunction with some of its handy methods, such as “setMapType()” and “drawZoomAndCenter()”.

Basically, the aforementioned methods permitted me to include these three types of Yahoo! Maps into a sample web document by specifying a simple containing DIV, which was responsible for positioning each of the maps in question within a web page. Also, in all the cases, I used the city of Los Angeles as the default geographical location being displayed by the maps, but as you know, this option can be modified to work with different places.

All right, at this time building basic Yahoo! Maps using the JavaScript methods already mentioned should be a familiar process to you. So with that idea in mind, it’s time to talk about the topics that will be discussed in this second article of the series. Simply put, in the next few lines I’m going to show you how to incorporate different types of zoom controls into an existing Yahoo! Map, expanding its current functionality.

A typical Yahoo! Map supports two basic zoom controls, “short” and “long.” Both of them have exactly the same function. However, they actually look pretty different, so I’m going to create some concrete examples for you to see how to work directly with each type.

With the preliminaries out of way, it’s time to show some action. Let’s learn how to add some zoom controls to a selected Yahoo! Map.

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