Home arrow JavaScript arrow Page 3 - A Closer Look at Smart Markers with Yahoo! Maps
JAVASCRIPT

A Closer Look at Smart Markers with Yahoo! Maps


The incorporation of Ajax-based geographical mapping applications, like the popular Yahoo! Maps, into an existing website can help to increase the number of potential visitors. So, if you're a web developer who wants to boost your web site's traffic by working with this powerful Yahoo! Ajax framework, or if you simply want to expand your skills in using its main features, then this series of articles might be what you're looking for.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
May 06, 2008
TABLE OF CONTENTS:
  1. · A Closer Look at Smart Markers with Yahoo! Maps
  2. · Inserting smart markers into a satellite map
  3. · Dropping smart markers in a regional Yahoo! Map
  4. · Displaying smart markers on a hybrid Yahoo! Map

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials