JAVASCRIPT

Using Polylines and Smart Markers with Yahoo! Maps

Welcome to the fifth part of the series “Working with Yahoo! Maps.” This series teaches you how to implement the most useful features that come packaged with the Yahoo! Maps Ajax framework. It will permit you to include powerful, highly interactive maps into your own website by using a combination of basic structural markup and a few lines of JavaScript code.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

April 29, 2008

TABLE OF CONTENTS:

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">

<head>

<title>Example on building a YAHOO! Map and adding simple markers</title>

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>

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) >>