Adding Zoom Controls to Yahoo! Maps (Page 1 of 4 )
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.
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.
Next: A quick review: building different types of Yahoo! Maps >>
More JavaScript Articles
More By Alejandro Gervasio
