The following example illustrates how to display Lat49 ads based on the geographic coordinates of the center of the map. The ads are updated whenever the map is panned or zoomed. Note that the z-index of the DIV displaying the ad is set to a high value to ensure that it appears over the map. Also, a valid Google Maps API key in place of "PUBLISHERKEY" is required to actually run the example below. Finally, the "adcontainer" DIV does not have the width and height style properties set like it did in previous HTML examples. This is done to avoid interfering with map mouse events around the ads.
For those who have not read the QuickStart or API Reference chapters in this document, it might be worthwhile to first review Example 3-5, which has similar code for getting and displaying ads without the added complexity of the Google Maps specific code.
Example 5-3. Example of ads 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</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">
<!--
var lat49App = {
map:null,
publisherID:12345, //These is fake, replace with correct value
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.333, -123.0), 8);
this.map.addControl(new GLargeMapControl());
},
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" lat49adposition="bottom-right"
style="position:absolute;right:10px;bottom:20px;z-index:99999;">
</div>
<div id="map" style="position:absolute; width:600px; height:600px"></div>
</div>
</body>
</html> |