The following example extends the previous example Example 5-3 by implementing the Lat49 pushpin feature using the Google Maps API. There are three differences. First of all, a line has been added to include the googlemap.js file. This file defines the AdPushpin singleton objects. Second, in the init function, the map object is passed to the AdPushpin class. Lastly, the adcontainer DIV includes the "onlat49pushpin" and the "onlat49hidepushpin" attributes. These specify the two callbacks necessary to show and hide the pushpins.
Example 5-4. Example of ads with pushpins in Google Maps
<!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>Google Maps Lat49 API Example With Pushpins</title>
<script src="http://adserver.lat49.com/lat49/v0.10/lat49.js"
language="javascript" type="text/javascript"></script>
<script
src="http://maps.google.com/maps?file=api&v=2&key=PUBLISHERKEY";
type="text/javascript"></script>
<script type="text/javascript" src="googlemap.js"></script>`
<script type="text/javascript">
<!--
var lat49App = {
map:null,
publisherID:12345, //This is fake, replace it
init:function(){
try { //Wrap the Lat49 calls to avoid exceptions if the server is blocked
Lat49.initAds(this.publisherID);
} catch(e) {}
this.map = new GMap2(document.getElementById("map"));
GEvent.addListener(this.map, "moveend", this.eventFired);
this.map.setCenter(new GLatLng(49.2636, -123.14), 8);
this.map.addControl(new GLargeMapControl());
AdPushpin.setMap(this.map); //pass the map to the pushpin class
},
eventFired:function()
{
var bnds = lat49App.map.getBounds();
var center = bnds.getCenter();
var lat = center.lat();
var lon = center.lng();
try {
var zoomlevel = Lat49.Tile.convertGMap2Zoom(lat49App.map.getZoom());
Lat49.updateAdByLatLon("adcontainer", lat, lon, zoomlevel);
} catch(e) {}
}
}
//-->
</script>
</head>
<body onload="lat49App.init()" onunload="GUnload()">
<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>
<div id="map" style="position:absolute; width:600px; height:600px"></div>
</div>
</body>
</html> |
The googlemaps.js files 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 in the pushpin control panel beside 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 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-5. AdPushpin javascript file using Google Maps
var AdPushpin = function()
{
//private members
var map = null;
var markersArray = new Array();
//public members
return {
// Set the map variable and define the pushpin icon.
setMap:function(m)
{
map = m;
},
//Update the marker info with a title and address
updateMarker:function(marker,title, address)
{
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<b>" + title + "</b><br> " + address);});
},
//Hide all the pushpins
hidePushPin:function()
{
for (var i = 0; i < markersArray.length; i++)
{
map.removeOverlay(markersArray[i]);
}
markersArray = new Array();
},
//Push new markers into the markersArray and display them on the map.
//The parameter is an array of objects that include latitude, longitude, title, address, and pinurl.
//var pin-lat = data[i].lat.
//var pin-lon = data[i].lon.
//var pin-title = data[i].title.
//var pin-address = data[i].address.
//var pin-url = data[i].pinurl.
showPushPin:function(loc)
{
var maxpins = 7;
for (var i=0; i<loc.length;i++)
{
if(i<=maxpins)
{
var point = new GLatLng(loc[i].lat, loc[i].lon);
var adicon = new GIcon(G_DEFAULT_ICON);
adicon.image = loc[i].pinurl;
adicon.shadow ="";
adicon.iconSize = new GSize(36,32);
var marker = new GMarker(point,{clickable: true, bouncy: true, icon:adicon});
map.addOverlay(marker);
// add markers to array
markersArray.push(marker);
this.updateMarker(marker, loc[i].title, loc[i].address);
}
}
}
}
}(); |