﻿<?xml version="1.0" encoding="UTF-8"?>
<Module>
<!-- Acknowledgement: Some of the code was based on Philippe Chappuis's "Google Maps API within a Gadget" which can be found here: http://www.liens-du-vin.ch -->
<ModulePrefs
	title="Hover to see church name, Click for more details"
	height="510"
	width="400"
	scrolling="false"
	directory_title="Google Maps - Display Lettered Markers Within Specified Area"
	description="A Gadget to display Google Maps. Markers based on Lat Lng values provided in external comma-separated values (CSV) file."
	author="Tom Hesketh-Roberts">
</ModulePrefs>
<UserPref name="Lat" display_name="Latitude" required="true" default_value="53.09699"/>,
<UserPref name="Lng" display_name="Longitude" required="true" default_value="-2.448010"/>
<UserPref name="Zoom" display_name="Zoom" required="true" default_value="13"/>
<UserPref name="BackCol" display_name="Background Color" required="true" default_value="#ff9e30"/>
<UserPref name="Key" display_name="Key Text" required="true" default_value="A=Anglican, B=Baptist, C=Catholic, I=Independent, M=Methodist, P=Pentecostal, S=Salvation Army, U=United Reformed"/>
<UserPref name="Churches" display_name="CSV Database of: Church Name,Lat,Long,Key,Link" required="true" default_value="http://pencilchewing.com/crewechurches.csv"/> 
<Content type="html"><![CDATA[

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;"></script>

<style text="text/css">
body
{
margin: 0;
padding: 0;
background: __UP_BackCol__;
}
.mapx
{
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 450px;
}
#key
{
height: 60px;
}
</style>

<script type="text/javascript">

var prefs = new _IG_Prefs(__MODULE_ID__);

var s_lat=_trim(prefs.getString("Lat"));
var s_lng=_trim(prefs.getString("Lng"));
var s_churches=_trim(prefs.getString("Churches"));

</script>
<div id="map_canvas" class="mapx"></div>
<div id="key"><table border="0"><tr><td valign="top"><b>Key</b>: </td><td valign="top">__UP_Key__</td></tr></table>

<script type="text/javascript">


// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.

var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);


// Creates a marker whose info window displays the letter corresponding
// to the given index.

function createMarker(markerTitle, markerLat, markerLng, markerLetter, markerLink) {
  // Create a lettered icon for this point using our icon class
  var letteredIcon = new GIcon(baseIcon);
  letteredIcon.image = "http://www.google.com/mapfiles/marker" + markerLetter + ".png";

  // Set up our GMarkerOptions object
  markerOptions = { icon:letteredIcon,title:markerTitle };;
  var marker = new GMarker(new GLatLng(markerLat,markerLng), markerOptions);

  GEvent.addListener(marker, "click", function() {
    top.location.href=markerLink;
  });

  return marker;
}


// Fetch data from CSV (comma-separated value) file containing church information.
// Format: Church Name,Latitude,Longitude,Key,Link
// (Latitude and Longitude refers to church location, Key refers to church denomination - use user-configurable property, Link refers to web site)
// For an example of a CSV please see the one given as the default user property
function getChurches(url) {
    var params = {};  
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;  
    gadgets.io.makeRequest(url, response, params);
};

// Callback function to process response from reading CSV file above
function response(obj) {
    var responseText = obj.text;  

    // Each church will be on a separate line.  Use the split function to process each church in turn (allow for different line-ending types).
    var churches = responseText.split(/\r\n|\r|\n/);

    for(var i = 0; i < churches.length; i++)
    {
       var churchParams = churches[i].split(",");
       map.addOverlay(createMarker(churchParams[0], churchParams[1], churchParams[2], churchParams[3], churchParams[4]));      
    }
}


function initialize()
{
 if (document.getElementById("map_canvas"))
 {
   map = new GMap2(document.getElementById("map_canvas"));
   map.setCenter(new GLatLng(s_lat, s_lng), __UP_Zoom__); //s_zoo == 12
   map.setUIToDefault();
   getChurches(s_churches);
 }
}

var map; // global variable

_IG_RegisterOnloadHandler(initialize);

</script><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>
]]></Content>
</Module>