PHPGeocache and the Google Maps API
This demonstration shows you how to use the Geocache class to show a Google Map of the cache.
This code shows you how to display a geocache in an interactive Google Map
You have to create your own free API key first at the
Google Maps API page.
<?php
// Load the PHP functions
require "PHPGeocache/PHPGeocache.inc.php";
// Insert your free GMAPS key here, obtain it from http://www.google.com/apis/maps/signup.html
define("GMAPS_KEY", "......");
$geocache=new Geocache();
if($geocache->loadCacheFromOCF("demo/ocf-multicache.xml")) {
$cacheHTML="<em>".htmlentities($geocache->name)."</em> <strong>".htmlentities($geocache->title)."</strong><br>".htmlentities(substr($geocache->description, 0, 60))."..."."<br><a href=\"".$geocache->url."\">".htmlentities($geocache->src)."</a>";
}
?><html>
<head>
<title>Google Mashup with OCF data</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=<?php echo GMAPS_KEY; ?>" type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var thePoint=new GLatLng(<?php echo $geocache->long; ?>, <?php echo $geocache->lat; ?>);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(thePoint, 13);
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
marker=new GMarker(thePoint, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<?php echo $cacheHTML; ?>");
});
map.addOverlay(marker);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
Geocache <strong>"<?php echo htmlentities($geocache->title); ?>"</strong><br>
<div id="map" style="width: 300px; height: 300px"></div>
</body>
</html>
This code shows you how to display a multicache or puzzlecache in an interactive Google Map
As this map shows all real cache/puzzle stations it is not suited for presentation to the end user/geocacher but
furthermore useful for an administration area where you want to see which route the geocacher used and if it is acceptable.
You have to create your own free API key first at the
Google Maps API page.
<?php
// Load the PHP functions
require "PHPGeocache/Geocache.inc.php";
// Insert your free GMAPS key here, obtain it from http://www.google.com/apis/maps/signup.html
define("GMAPS_KEY", "......");
$geocache=new Geocache();
if($geocache->loadCacheFromOCF("demo/ocf-multicache.xml")) {
$cacheHTML="<em>".htmlentities($geocache->name)."</em> <strong>".htmlentities($geocache->title)."</strong><br>".htmlentities(substr($geocache->description, 0, 60))."..."."<br><a href=\"".$geocache->url."\">".htmlentities($geocache->src)."</a>";
}
?><!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Google Mashup with OCF data</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=<?php echo GMAPS_KEY; ?>" type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var thePoint=new GLatLng(<?php echo $geocache->long; ?>, <?php echo $geocache->lat; ?>);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(thePoint, 13);
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
marker=new GMarker(thePoint, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<?php echo $cacheHTML; ?>");
});
map.addOverlay(marker);
var polyline = new GPolyline([
<?
if($waypoints=$geocache->getRealWaypoints()) {
for($i=0; $i<sizeof($waypoints); $i++)
{
list($long, $lat)=$waypoints[$i]->getCoordinates();
echo "new GLatLng(".$long.", ".$lat.")";
if($i != (sizeof($waypoints) -1)) {
echo ",\n";
}
}
}
?>
], "#c40000", 10);
map.addOverlay(polyline);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
Geocache <strong>"<?php echo htmlentities($geocache->title); ?>"</strong><br>
<div id="map" style="width: 300px; height: 300px"></div>
</body>
</html>
