Using Polylines and Smart Markers with Yahoo! Maps - Using smart markers with a selected Yahoo! Map
(Page 4 of 4 )
As I said in the prior section, Yahoo! Maps support the inclusion of "smart markers," which are markers whose visual appearance can be enriched with additional markup, such as paragraphs and bolded text. However, this concept will be better understood if you take a look at the following example, which shows how to use the markers in question:
<!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 satellite YAHOO! 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 using smart markers with satellite 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 long 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,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>
Undoubtedly, there are some interesting things to note with reference to the above example. First, notice how the smart markers are created with the brand new "YMarker" JavaScript class, and also how a basic label is added to each of them via the "addAutoExpand()" method, which comes in handy for inserting descriptive tool tips into a selected marker.
Finally, some additional markup is added to each marker, which will be properly displayed on the map by using another helpful method, called "openSmartWindow()." In case you're wondering what a smart window is within the context of Yahoo! Maps, basically they contain DIVs that can be shown or hidden in response to a determined event, including mouse clicks, of course.
To help you understand the functionality of smart markers, I included an image that shows them in action. Here it is:
All right, with the inclusion of this final hands-on example you should have at least a basic background in using smart markers with an existing Yahoo! Map. Nonetheless, I suggest you practice using the code samples shown in this tutorial. It's the best learning method!
Final thoughts
That's all for the moment. In this fifth chapter of the series, you learned a couple of additional features of Yahoo! Maps, namely working with simple polygonal lines and using "smart" markers, which are markers that can include their own markup.
Nonetheless, smart markers require a more detailed analysis. Thus, I'll be putting my focus on them in the final installment of this article series. You don't have any excuses to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
