The following example is similar to the last Example 5-4 except that it is implemented using Virtual Earth instead of the Google Maps API.
Example 5-6. Example of ads with pushpins using Virtual Earth
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Virtual Earth Lat49 API Example</title>
<script src="http://advserver.lat49.com/lat49/v0.10/lat49.js"
language="javascript" type="text/javascript"></script>
<script
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6";
type="text/javascript"></script>
<script type="text/javascript" src="vemap.js"></script>
<script type="text/javascript">
<!--
var lat49App = {
map:null,
publisherID:12345, //This is fake, replace it with correct value
ah2: null,
init:function()
{
//Wrap the Lat49 calls in case the server wasn't reached.
try {
Lat49.initAds(this.publisherID);
} catch(e) {}
this.map = new VEMap('map');
var VANCOUVER = new VELatLong(49.3251, -123.0677);
this.map.LoadMap(VANCOUVER, 14, VEMapStyle.Road, false,
VEMapMode.Mode2D, false, 1);
this.map.AttachEvent("onchangeview", this.eventFired);
AdPushpin.setMap(this.map);
},
eventFired:function()
{
var center = lat49App.map.GetCenter();
var lat = center.Latitude;
var lon = center.Longitude;
try {
var zoomlevel = Lat49.Tile.convertLiveZoom(lat49App.map.GetZoomLevel());
Lat49.updateAdByLatLon("adcontainer", lat, lon, zoomlevel);
} catch(e) {}
}
}
//-->
</script>
</head>
<body onload="lat49App.init(); lat49App.eventFired()">
<div style="position:absolute; width:600px; height:600px; border:1px solid black;">
<div id="adcontainer" onlat49pushpin="AdPushpin.showPushPin"
onlat49hidepushpin="AdPushpin.hidePushPin" lat49adposition="top-right"
style="position:absolute;right:10px;top:10px;z-index:99999;">
</div>
<!-- the map -->
<div id="map" style="position:absolute; width:600px; height:600px"></div>
</div>
</body>
</html> |
The vemaps.js file defines the AdPushpin object which handles the showing and hiding of the pushpins associated with the Lat49 ads.
When the 'Map it' button is clicked on the pushpin control panel next to the ad, the showPushpin function is called and pushpins are appended to the markersArray and displayed on the map. The pushpins remain on the map even after the ad is no longer visible. The number of pushpins displayed on your map can range from 1 to all. In this example, we fix the max number of pins to 7. Don't be surprised if you click on 'Map it' and can't see the pin(s); you may have to zoom out to view all the pin(s).
When the 'Clear' button on the pushpin control panel is clicked, all pushpins that were appended to the markersArray (i.e. the Lat49 related pushpins) are removed from the map and markersArray is set to null.
Clicking on a pushpin pops up an information window that shows the name of the pushpin and its address.
Example 5-7. AdPushpin javascript file using Virtual Earth
var AdPushpin = function()
{
//private members
var map = null;
var markersArray = new Array();
var adicon;
//public members
return {
// Set the map variable and define the pushpin icon.
setMap:function(m)
{
map = m;
adicon = new VECustomIconSpecification();
adicon.Image = 'http://adserver.lat49.com/lat49/v0.10/img/lat49-marker_36x32.png';
adicon.ImageOffset = new VEPixel(-5,-6);
},
//Update the marker info with a title and address
updateMarker:function(marker,title, address)
{
marker.SetTitle(title);
marker.SetDescription(address);
},
//Hide all the pushpins
hidePushPin:function()
{
for (var i = 0; i < markersArray.length; i++)
{
map.DeleteShape(markersArray[i]);
}
markersArray = new Array();
},
//Push new markers into the markersArray and display them on the map.
showPushPin:function(loc)
{
var maxpins = 7;
for (var i=0; i<loc.length;i++)
{
if(i<=maxpins)
{
var point = new VELatLong(loc[i].lat, loc[i].lon);
var marker = new VEShape(VEShapeType.Pushpin, point);
marker.SetCustomIcon(adicon);
map.AddShape(marker);
// add markers to array
markersArray.push(marker);
this.updateMarker(marker, loc[i].title, loc[i].address);
}
}
}
}
}(); |