Adding Zoom Controls to Yahoo! Maps - A quick review: building different types of Yahoo! Maps
(Page 2 of 4 )
Before I proceed to show you how to incorporate some useful zoom controls into an existing Yahoo! Map, I’d like to review very quickly the group of hands-on examples that were developed in the first part of this series. This way, you can recall some basic concepts concerning the creation of the three main types of maps supported by this Yahoo! Ajax framework.
Here are the respective code samples that demonstrate how to build a regional, a hybrid, and a satellite-based Yahoo! Map:
(example on building a basic regional 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! Regional Map</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! Regional Map</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();
// Set map type to YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_REG);
// Display the map centered on the selected location
map.drawZoomAndCenter("Los Angeles",3);
</script>
</body>
</html>
(example on building a basic hybrid 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! Hybrid Map</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! Hybrid Map</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();
// Set map type to YAHOO_MAP_HYB
map.setMapType(YAHOO_MAP_HYB);
// Display the map centered on the selected location
map.drawZoomAndCenter("Los Angeles",3);
</script>
</body>
</html>
(example on building a basic satellite 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! Satellite Map</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! Satellite Map</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();
// 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>
With the inclusion of the above hands-on examples, hopefully you’ve recalled how to build different types of Yahoo! Maps. Not too difficult to grasp, right?
Of course, in this particular case I’m not going to include the complementary images that correspond to each of the earlier examples, since this process would be rather boring to you and completely unnecessary. Thus, having reviewed the foundations on how to build basic Yahoo! Maps, it’s time to continue learning more useful features that come integrated with this powerful Yahoo! framework.
In consonance with the concepts that I deployed in the beginning of this article, in the course of the section to come, I’m going to teach you how to add some simple zoom controls to an existing Yahoo! Map.
To learn the basics of how to include this brand new zoom control in a selected Yahoo! Map, please click on the link that appears below and keep reading.
Next: Adding a long zoom control to Yahoo! Maps >>
More JavaScript Articles
More By Alejandro Gervasio
/ 2 
