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 / 4
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

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

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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