Support/Comments for GoogleMapMarker

<?php
/* Snippet name: [[GoogleMapMarker]]
 * Version: 1.0d
 * Author: doze <[email protected]>
 * 
 * Snippet to generate goolemaps map and place markers 
 * to the maps from documents.
 * 
 * NOTE! You have to have Ditto 1.0.2 or later installed.
 *
 * Installation:
 * -------------
 * 1. Create GoogleMapMarker snippet from the contents of this file.
 * 2. Create chunk called GoogleMapCode and place the following in side that chunk (remove asterics *)
 *
 *	var point = new GLatLng([+description+]);
 *	var marker = createMarker(point, '[+title+]', '[+summary+]');
 *	map.addOverlay(marker);
 * 
 * 3. Call the snippet in some document: [[GoogleMapMarker? &apikey=`ABQIA..`]]
 * 
 *
 * How to place markers:
 * ---------------------
 * 1. Create a folder in MODx manager what will keep the marker documents, can be unpublished.
 * 2. Create a new document inside that folder what will be the marker
 *    - Title: Will be used as the marker "sidelink" text (example: My home)
 *    - Description: The coordinates for the marker (example: 63.098332,23.056698)
 *    - Document content: HTML to show in the marker popup. 
 *                        NOTE: You have to escape all ' characters by putting backslash before them, e.g. \'
 * 3. Add the &startID parameter to the snippet call pointing to the folder what has the marker documents
 *    example: [[GoogleMapMarker? &apikey=`ABQIA..` &startID=`52`]]
 *
 * Example GoogleMapMarker template chunk (&tpl)
 * ---------------------------------------------
 * The template must have 2 divs. A div for the map and div for the side links. That's it.
 *
 *	<div id="map" style="float:left; width: 350px; height: 350px;">Loading map...</div>
 *	<div id="maplinks" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
 *
 */

////////////////////////////////////////////////////////
// Parameter default values configuration
////////////////////////////////////////////////////////

// [text]
// The Google Maps api key to use (http://www.google.com/apis/maps/signup.html)
$apiKey = (isset($apiKey)) ? $apiKey : "";

// [number]
// The ID number of the top folder that has google marker documents
$startID = (isset($startID)) ? $startID : "";

// [number]
// Number of levels deep to go
$descendentDepth = (isset($descendentDepth)) ? $descendentDepth : 1;

// [text]
// Field to sort by (recommended values include createdon, pub_date, editedon)
$sortBy = (isset($sortBy)) ? $sortBy : "createdon";

// ["DESC" | "ASC"]
// Direction to sort by, either ASC (ascending) or DESC (descending)
$sortDir = (isset($sortDir)) ? $sortDir : "ASC";

// [text]
// Chunk name to use as a template
$tpl = (isset($tpl)) ? $tpl : "";

// [text]
// Id name of the div where the map will be rendered
$mapDiv = (isset($mapDiv)) ? $mapDiv : "map";

// [text]
// Id name of the div where the marker links will be rendered
$linksDiv = (isset($linksDiv)) ? $linksDiv : "maplinks";

// [text]
// Class name to use in the marker links
$linksClass = (isset($linksClass)) ? $linksClass : "maplink";

// [0 | 1]
// Show the marker links?
$showLinks = (isset($showLinks)) ? $showLinks : 1;

// ["normal" | "satellite" | "hybrid"]
// Initial type of the map
$mapType = (isset($mapType)) ? $mapType : "normal";

// [latitude,longitude]
// Coordinates to the initial center position of the map
$centerPos = (isset($centerPos)) ? $centerPos : "63.098332,23.056698";

// [number]
// Initial zoomlevel for the map
$defaultZoom = (isset($defaultZoom)) ? $defaultZoom : "8";

// ["large" | "small" | "zoomonly" | "none"]
// Look of the controls to navigate / zoom the map
$mapControl = (isset($mapControl)) ? $mapControl : "large";

// ["large" | "small" | "none"]
// Look of the controls to change the map type
$mapTypeControl = (isset($mapTypeControl)) ? $mapTypeControl : "large";

// [0 | 1]
// When mouse cursor is moved over the map marker, should the info box open on that marker?
$openMouseOverMarker = (isset($openMouseOverMarker)) ? $openMouseOverMarker : 0;

// [0 | 1]
// When the map marker is clicked, should the info box open on that marker?
$openMouseClickMarker = (isset($openMouseClickMarker)) ? $openMouseClickMarker : 1;

// [0 | 1]
// When the map marker is clicked, should a URL be launched rather than the info box?
$openMouseClickMarkerUrl =  (isset($openMouseClickMarkerUrl)) ? $openMouseClickMarkerUrl : 0;

// [0 | 1]
// When mouse cursor is moved over the textual marker link, should the info box open on that marker?
$openMouseOverLink = (isset($openMouseOverLink)) ? $openMouseOverLink : 0;

// [0 | 1]
// When the textual marker link is clicked, should the info box open on that marker?
$openMouseClickLink = (isset($openMouseClickLink)) ? $openMouseClickLink : 1;

// [0 | 1]
// Show overview map in the right bottom corner of the map?
$showOverviewMap = (isset($showOverviewMap)) ? $showOverviewMap : 1;

// [width,heigth]
// Size of the overview map
$overviewMapSize = (isset($overviewMapSize)) ? $overviewMapSize : "150,150";

// [0 | 1]
// Should the overview map be hidden by default? (arrow indicator visible at the bottom right corner)
$hideOverviewMapByDefault = (isset($hideOverviewMapByDefault)) ? $hideOverviewMapByDefault : 1;

// [text]
// Name of the Ditto snippet
$dittoName = (isset($dittoName)) ? $dittoName : "Ditto";

// [text]
// Name of the chunk to use in ditto call as template
$dittoChunk = (isset($dittoChunk)) ? $dittoChunk : "GoogleMapCode";

////////////////////////////////////////////////////////
// Start of snippet code
////////////////////////////////////////////////////////

if($apiKey != "" && $modx->getChunk($dittoChunk) != "") {

	$script = '
		<script type="text/javascript">
		//<![CDATA[
			
			// addEvent scripts written by Dean Edwards, 2005
			// with input from Tino Zijdel, Matthias Miller, Diego Perini
			// http://dean.edwards.name/weblog/2005/10/add-event/

			function addEvent(element, type, handler) {
				if (element.addEventListener) {
					element.addEventListener(type, handler, false);
				} else {
					// assign each event handler a unique ID
					if (!handler.$$guid) handler.$$guid = addEvent.guid++;
					// create a hash table of event types for the element
					if (!element.events) element.events = {};
					// create a hash table of event handlers for each element/event pair
					var handlers = element.events[type];
					if (!handlers) {
						handlers = element.events[type] = {};
						// store the existing event handler (if there is one)
						if (element["on" + type]) {
							handlers[0] = element["on" + type];
						}
					}
					// store the event handler in the hash table
					handlers[handler.$$guid] = handler;
					// assign a global event handler to do all the work
					element["on" + type] = handleEvent;
				}
			};
			// a counter used to create unique IDs
			addEvent.guid = 1;

			function removeEvent(element, type, handler) {
				if (element.removeEventListener) {
					element.removeEventListener(type, handler, false);
				} else {
					// delete the event handler from the hash table
					if (element.events && element.events[type]) {
						delete element.events[type][handler.$$guid];
					}
				}
			};

			function handleEvent(event) {
				var returnValue = true;
				// grab the event object (IE uses a global event object)
				event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
				// get a reference to the hash table of event handlers
				var handlers = this.events[event.type];
				// execute each event handler
				for (var i in handlers) {
					this.$$handleEvent = handlers[i];
					if (this.$$handleEvent(event) === false) {
						returnValue = false;
					}
				}
				return returnValue;
			};

			function fixEvent(event) {
				// add W3C standard event methods
				event.preventDefault = fixEvent.preventDefault;
				event.stopPropagation = fixEvent.stopPropagation;
				return event;
			};
			fixEvent.preventDefault = function() {
				this.returnValue = false;
			};
			fixEvent.stopPropagation = function() {
				this.cancelBubble = true;
			};
				
			addEvent(window, "unload", GUnload);

			if (GBrowserIsCompatible()) {
				// Display the map, with some controls
				var map = new GMap2(document.getElementById("'.$mapDiv.'"));
				// set initial center position
				map.setCenter(new GLatLng('.$centerPos.'),'.$defaultZoom.');
	
				//add controls to navigate / zoom
				';

	if ($mapControl == "zoomonly") {
		$script .= '
				map.addControl(new GSmallZoomControl());';
	} else if ($mapControl == "large") {
		$script .= '
				map.addControl(new GLargeMapControl());';
	} else if ($mapControl == "small") {
		$script .= '
				map.addControl(new GSmallMapControl());';
	}

	if ($mapTypeControl == "large") {
		$script .= '
				// add controls to change map type
				map.addControl(new GMapTypeControl(0));';
	} else if ($mapTypeControl == "small") {
		$script .= '
				// add controls to change map type
				map.addControl(new GMapTypeControl(1));';
	}

		$script .= '
				//set initial map type
				';
	if ($mapType == "normal") {
		$script .= '
				map.setMapType(G_NORMAL_MAP);';
	} else if ($mapType == "satellite") {
		$script .= '
				map.setMapType(G_SATELLITE_MAP);';
	} else if ($mapType == "hybrid") {
		$script .= '
				map.setMapType(G_HYBRID_MAP);';
	}
		$script .= '
				// arrays to hold copies of the markers and html used by the sidebar
				// because the function closure trick doesnt work there
				var sidebar_html = "";
				var gmarkers = [];
				var htmls = [];
				var i = 0;

				// a function to create the marker and set up the event window
				function createMarker(point,name,html) {
					var marker = new GMarker(point);';

	if($openMouseClickMarker) {
		$script .= '
					// event listener to open info on click
					GEvent.addListener(marker, "click",	function(){';
		if($openMouseClickMarkerUrl) {
			$script .= '			window.open(html);';
		} else {
			$script .= '			marker.openInfoWindowHtml(html);';
		}
		$script .= '			});';
	}

	if($openMouseOverMarker) {
		$script .= '
					// The new marker "mouseover" listener
					GEvent.addListener(marker,"mouseover", function(){
						marker.openInfoWindowHtml(html);
					});';
	}

	if($showLinks) {
		$script .= '	
					// save the info we need to use later for the sidebar
					gmarkers[i] = marker;
					htmls[i] = html;
					// add a line to the sidebar html
					sidebar_html += \'<div class="'.$linksClass.'"><a href="javascript:void(0)" ';

		if($openMouseClickLink) {
			$script .= 'onClick="myclick(\' + i + \')"';
		}

		if($openMouseOverLink) {
			$script .= 'onMouseOver="myclick(\' + i + \')"';
		}

		$script .= '>\' + name + \'</a></div>\';
		i++;';
	}

		$script .= '
					return marker;
				}

				// This function picks up the click and opens the corresponding info window
				function myclick(i) {
					gmarkers[i].openInfoWindowHtml(htmls[i]);
				}';
	if($startID != "") {
		$script .= $modx->runSnippet($dittoName,array('extenders' => 'summary', 'descendentDepth' => $descendentDepth, 'sortBy' => $sortBy, 'sortDir' => $sortDir, 'summarize' => 'all', 'displayArchive' => '0', 'tpl' => $dittoChunk, 'startID' => $startID, 'showPublishedOnly' => '1', 'trunc' => '0'));

		if($showLinks) {
			$script .= '
				// put the assembled sidebar_html contents into the sidebar div
				document.getElementById("'.$linksDiv.'").innerHTML = sidebar_html;';
		}
	}

	if($showOverviewMap) {
		$script .= '
				// ======== Add a map overview ==========
				var ovcontrol = new GOverviewMapControl(new GSize('.$overviewMapSize.')); 
				map.addControl(ovcontrol,new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10)));';
	}
	if($hideOverviewMapByDefault) {
		$script .= '
				//set hidden by default (without animation)
				ovcontrol.hide(1);';
	}
		$script .= '
			} else { // !GBrowserIsCompatible()
				alert("Sorry, the Google Maps API is not compatible with this browser");
			}
	
			// This Javascript is based on code provided by the
			// Blackpool Community Church Javascript Team
			// http://www.commchurch.freeserve.co.uk/ 
			// http://www.econym.demon.co.uk/googlemaps/

		//]]>
		</script>
		';

	//register scripts
	$modx->regClientScript($script);
	$modx->regClientStartupScript("http://maps.google.com/maps?file=api&v=2&key=".$apiKey);

	if($tpl == "") {
		$returnstring = '
			<div id="'.$mapDiv.'" style="float:left; width: 350px; height: 350px;">Loading map...</div>
			<div id="'.$linksDiv.'" style="margin-left: 10px; padding-right: 10px; float: left; display: block; height: 350px; overflow: auto;"></div>
			<noscript>
				<b>JavaScript must be enabled in order for you to use Google Maps.</b> 
				However, it seems JavaScript is either disabled or not supported by your browser.
				To view Google Maps, enable JavaScript by changing your browser options, and then
				try again.
			</noscript>
			';
	} else {
		$returnstring = $modx->getChunk($tpl);
	}
} else {
	if ($apiKey == "") {
		$returnstring = '
						You have to provide a Google Maps API key to use!<br />
						If you don\'t have one yet, go <a href="http://www.google.com/apis/maps/signup.html" alt="Sign up for the Google Maps API">here</a> to get it. NOTE: the api key is site/directory specific!<br /><br />
						';
	}
	if ($modx->getChunk($dittoChunk) == "") {
		$returnstring = '
						It seems, that you don\'t have the chunk in place what will be used in Ditto snippetcall. Please create a chunk with name GoogleMapCode (default) that has the following contents:<br />
						<pre>
				var point = new GLatLng([<!-- -->+description+<!-- -->]);
				var marker = createMarker(point, \'[<!-- -->+title+<!-- -->]\', \'[<!-- -->+summary+<!-- -->]\');
				map.addOverlay(marker);
						</pre>
						';
	}

}

return $returnstring;
?>

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "[*your_icon_tv*]";
icon.shadow = "[*your_icon_shadow_tv*]";
icon.iconSize = new GSize(20, 35);
icon.shadowSize = new GSize(29, 18);
icon.iconAnchor = new GPoint(10, 15);
icon.infoWindowAnchor = new GPoint(5, 1);