A Closer Look at Smart Markers with Yahoo! Maps - Dropping smart markers in a regional Yahoo! Map
(Page 3 of 4 )
Undoubtedly, the use of smart markers with different types of Yahoo! Maps is a straightforward process that can be tackled with minor problems. A solid demonstration of this concept is the example that you saw in the previous section, which showed how to include these markers in a satellite map.
Based on the same approach used in the cited example, I’m going to teach you how to incorporate a few smart markers into a regional map. Given that, the code sample that implements this procedure is listed below:
<!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 using smart markers with a regional YAHOO! Map</title>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?
v=3.7&appid=YahooDemo"></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 using smart markers with a regional YAHOO! Map</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_REG
map.setMapType(YAHOO_MAP_REG);
// 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,displaySmartMarker);
// display smartMarker
function displaySmartMarker(_e,_c){
var geoPoint=new YGeoPoint(_c.Lat,_c.Lon);
var newMarker= new YMarker(geoPoint);
// call 'autoexpand()' method
newMarker.addAutoExpand('This is a smart marker');
// add HTML to the smart marker
var markerHTML= '<p>This is the markup<br />';
markerHTML+='of the smart marker</p>';
YEvent.Capture(newMarker,EventsList.MouseClick,function()
{newMarker.openSmartWindow(markerHTML)});
map.addOverlay(newMarker);
}
}
window.onload=function(){
initializeMap();
}
</script>
</body>
</html>
If you found it easy to work with smart markers in conjunction with a satellite Yahoo! Map, then it’s quite possible that you find the above example even simpler to grasp and code. As you can see, I used the same click logger discussed earlier to display the corresponding smart markers on a regional map.
Again, I’d like to highlight the most important feature offered by this kind of marker, and that is its ability to incorporate additional markup within its own structure. This is something that can be really useful for improving its visual appearance.
And finally, to complement the prior hands-on example, below I included an illustrative image that shows a few smart markers being dropped in the pertinent map. Here’s how the image in question looks:
Not too hard to understand, right? As you can see in the above image, smart markers are powerful elements that can be used to highlight different geographical points within a given map. They’re also completely customizable.
Now that you've learned how to display some smart markers on a regional map, it’s time to move forward and create a concluding hands-on example aimed at demonstrating how to include the markers in question into a hybrid map. That will complete this overview of this useful Yahoo! Ajax framework.
To learn the details of how this example will be built, you’ll have to read the last section of this tutorial. It’s only one click away.
Next: Displaying smart markers on a hybrid Yahoo! Map >>
More JavaScript Articles
More By Alejandro Gervasio
