Using Polylines and Smart Markers with Yahoo! Maps - Review: adding basic markers to an existing map
(Page 2 of 4 )
Of course, I know that you're so curious about learning how to draw some polylines on a given Yahoo! Map that you can't wait to read that particular section of the tutorial. However, as you know, small moves take us a long way, so in this case, I'm going to show you the complete process of adding a number of basic markers to a selected map, in case you didn't have the chance to read the article in which I discussed this process in detail.
Having clarified this point, pay close attention to the following hands-on example, which demonstrates how to incorporate a few basic markers into a sample 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! Map and adding simple markers</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! Map and adding simple markers</h1>
<div id="mapcontainer"></div>
<script type="text/javascript">
function initializeMap(){
// Create a new map object
var map=new YMap(document.getElementById('mapcontainer'));
// Add type controls to the map
map.addTypeControl();
// Add the Pan Control to the map
map.addPanControl();
// Add slong zoom control to the map
map.addZoomLong();
// 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);
// Add an event to report to our Logger
YEvent.Capture(map,EventsList.MouseClick,displayMarker);
// display new marker on the map
function displayMarker(_e,_c){
var geoPoint=new YGeoPoint(_c.Lat,_c.Lon);
map.addMarker(geoPoint);
}
}
window.onload=function(){
initializeMap();
}
</script>
</body>
</html>
Even though the previous example is actually very easy to follow, let me briefly explain what it does. Basically, in this particular case, I used the click logger that you saw in the preceding article of the series to display different basic markers on a satellite Yahoo! map as the map in question is being clicked on.
As you can see, markers are added dynamically via the callback "displayMarker()" JavaScript function, which is invoked by the pertinent "YEvent.Capture()" method, which comes bundled with the Yahoo UI library. The most relevant point to stress here is that those markers are actually included into the map by using the "addMarker()" method, something that should be quite easy to grasp.
Well, at this point you've hopefully recalled the foundations of how to incorporate a few simple markers into an existing Yahoo! Map. Thus, considering this propitious scenario, it's time to learn other useful features that come packaged with the Yahoo! Map Ajax framework.
In the section to come, I'm going to show you how to draw different polylines on a selected map by utilizing the click logger that I reviewed earlier. Click on the link below and keep reading.
Next: Drawing polygonal lines (polylines) >>
More JavaScript Articles
More By Alejandro Gervasio
