The following example embeds an ad with the pusphpin control panel into an HTML page when the link is clicked. The convenience methods Lat49.initAds() and Lat49.updateAdByLatLon() are used to set up and fetch the ad. The ad as well as its pushpin control panel are appended within the DIV named "adcontainer". Clicking on 'Map it' displays the pushpin data associated with this ad into an alert diaglog box.
Example 3-9. Simple embedded pushpin ad
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lat49Test</title>
<META NAME="description" CONTENT="A web site that tests the Lat49 client API.">
<!-- Include the Lat49 API script. -->
<script type='text/javascript'
src='http://adserver.lat49.com/lat49/v0.10/lat49.js'>
</script>
<script type='text/javascript'>
/* Write code here to display pushpins related to displayed ad. */
/* Paramerter loc will be filled pushpin data in order of closest to furthest. */
function showPushPin(loc)
{
var i=0;
var pushpindata = "";
for(i=0; i<loc.length;i++)
{
pushpindata = pushpindata+"latitude="+loc[i].lat+" ";
pushpindata = pushpindata+"longitude="+loc[i].lon+" ";
pushpindata = pushpindata+"title="+loc[i].title+" ";
pushpindata = pushpindata+"address="+loc[i].address+"\n\n";
pushpindata = pushpindata+"pinurl="+loc[i].pinurl+"\n\n";
}
alert(pushpindata);
}
/* write code here to hide lat49 pushpins that were added to your map */
function hidePushPin()
{
alert("hide pushpins");
}
</script>
</head>
<!-- Initialize the Lat49 API on loading the body.
The following publisher ID of '12345' is fake, and should be replaced
by the proper value for a publisher's site. -->
<body onload = "Lat49.initAds('12345')">
<h2> Simple Lat49 test.</h2>
<p>
<!-- Fetch the ad when the link is clicked. -->
Click the
<a href="javascript:Lat49.updateAdByLatLon('adcontainer',85.051,-179.999,16)">
link</a> to see the ad for tile (0,0,16):
</br>
<!-- View Pushpin Control Panel with Ad -->
<div id="adcontainer" onlat49pushpin="showPushPin" onlat49hidepushpin="hidePushPin"
style="width:242px; height:133px; position:relative">
</div>
</body>
</html> |