Working with Yahoo! Maps - Building a simple regional map
(Page 2 of 4 )
The first thing that you have to do before starting to use Yahoo! Maps is get an application ID, which can be obtained via a simple online registration process. If you haven’t completed this requirement, visit Yahoo Maps’ website, located at http://developer.yahoo.com/maps/ajax/index.html, to learn how to fill in the corresponding online form.
In this case, I’m going to assume that you've already got the application ID and everything is set up to start building some Yahoo! Maps. With that in mind, pay attention to the following example, which shows how to create a basic regional map by using some simple structural markup, along with the combination of a few CSS styles and JavaScript code.
Here’s the corresponding code sample:
<!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>
As you can see, the above example first downloads the JavaScript source file required to work with Yahoo! Maps (note that the pertinent application ID is passed within the query string). Then it creates a new map via the “YMap” class, which takes up the ID of the (X)HTML container that will hold the map in question as the unique input parameter.
Next, the “setMapType()” method is utilized to specify what type of map should be constructed (in this case, I’m building a regional map, so I use the YAHOO_MAP_REG value). And finally, the map is displayed, centered on the container using Los Angeles City as a predefined geographical location. Pretty simple to grasp, right?
In addition to the previous code sample, below I included an image that shows the Yahoo! Map just created. Here it is:
As demonstrated earlier, building a raw Yahoo! Map is reduced to creating an instance of the corresponding “YMap” class and then using some of its methods to perform all sorts of clever things, like specifying the type of map to be displayed, its initial geographical location, etc.
So far, so good, right? At this point you should feel pretty satisfied, since you learned the basic concepts surrounding the creation of basic Yahoo! Maps. Now I’m going to show you how to play with the “setMapType()” method that you learned before to create a “hybrid” map, which is one that combines regional and satellite images together.
Want to learn more about how to build these kind of Yahoo! Maps? Go ahead and read the next few lines.
Next: Building a primitive hybrid Yahoo! Map >>
More JavaScript Articles
More By Alejandro Gervasio
