Well, I was able to get the IE6 Detection widget to work by moving the functions from class Widget to class Widget_Controller. Now I'm having a bit of trouble with the Google Maps widget.
Out of the box, it simply didn't work.
I tried to rewrite it using code that works on a standalone page, but it's failing too.
I'm missing something important about how to work with forms and parameters in Silverstripe. Can anyone help me out?
Here's my code:
class MapWidget extends Widget {
static $db = array(
"MapName" => "Varchar",
"MapLat" => "Varchar",
"MapLng" => "Varchar",
"MapText" => "HTMLVarchar",
"MapZoom" => "Int",
"MapDirections" => "Boolean"
);
static $defaults = array(
"MapName" => "Map Name",
"MapLat" => 41.6639,
"MapLng" => -91.5304,
"MapText" => "Map description or text.",
"MapZoom" => "16",
"MapDirections" => true
);
static $title = "Map";
static $cmsTitle = "Google Map";
static $description = "Inserts a Google Map on your page";
function getCMSFields() {
return new FieldSet(
new TextField("MapName", "Map Name "),
new TextField("MapLat", "Latitude Coords "),
new TextField("MapLng", "Longitude Coords "),
new TextField("MapText", "Marker Text "),
new TextField("MapZoom", "Zoom Level "),
new DropdownField("MapDirections", "Enable directions", array("1" => "Yes", "0"=>"No"))
);
}
}
class MapWidget_Controller extends Widget_Controller {
function output(){
$id = $this->createMapID();
Requirements::javascript("http://maps.google.com/maps?file=api&v=2&key=THISISMYGOOGLEMAPSAPICODE");
Requirements::javascript("widgets_maps/scripts/prototype.js");
Requirements::javascript("widgets_maps/scripts/MapWidget.js");
Requirements::css("widgets_maps/css/MapWidget.css");
//$output = new DataObjectSet();
$mapDiv = "<div class='map-container' id='map-container-".$id."'></div>";
$directionsForm = "";
$directionsDiv = "";
if($this->MapDirections)
{
$directionsForm = "<div class='map-directions-form-container'>"
."<form class='directions-form' "
."onsubmit='setDirections(this.from.value, this.locale.value); return false;'>"
."<label for='fromAddress'>"
."<span>From:</span></label>"
."<input type='text' size='60' "
."id='fromAddress' name='from' "
."value='Iowa City, IA' />"
."<label for='mapDestination'>"
."<span>To:</span></label>"
."<p id='mapDestination'>"
.$this->MapName.
."</p>"
."<label for='locale'>"
."<span>Language:</span></label>"
."<select id='locale' name='locale'/>"
."<option value='en' selected>English</option>"
."<option value='fr'>French</option>"
."<option value='de'>German</option>"
."<option value='ja'>Japanese</option>"
."<option value='es'>Spanish</option>"
."</select>"
."<input name='submit' type='submit' value='Get Directions!' />"
."</form></div>";
$directionsDiv = "<div class='map-directions-container' id='map-directions-container-".$id."'></div>";
}
$mapContainer = "<div class='map-widget-container' id='map-widget-container-".$id."'>".$mapDiv.$directionsForm.$directionsDiv."</div>";
$outputStr = $mapContainer.'<script language="javascript">'
.'var map; var gdir; var geocoder = null; var addressMarker;'
.'function initialize() {'
.' if (GBrowserIsCompatible()) {'
.' map = new GMap2(document.getElementById("map-container-'.$id.'"));'
.' map.setMapType(G_NORMAL_MAP);'
.' gdir = new GDirections(map, document.getElementById("directions"));'
.' GEvent.addListener(gdir, "addoverlay", onGDirectionsLoad);'
.' GEvent.addListener(gdir, "error", handleErrors);'
.' setDirections("Iowa City, IA", "en_US");'
.' heirarchicalControl = new GHierarchicalMapTypeControl();'
.' heirarchicalPos = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0,0));'
.' zoomControls = new GLargeMapControl3D() ;'
.' zoomPos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 10));'
.' map.addControl(heirarchicalControl,heirarchicalPos);'
.' map.addControl(zoomControls,zoomPos);'
.' }'
.'}'
.'function setDirections(fromAddress, locale) {'
.' gdir.load("from: " + fromAddress + " to: 228 North Dodge Street, Iowa City, IA",'
.' { "locale": locale });'
.'}'
.'function handleErrors(){'
.' if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)'
.' alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);'
.' else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)'
.' alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);'
.' else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)'
.' alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);'
.' else if (gdir.getStatus().code == G_GEO_BAD_KEY)'
.' alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);'
.' else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)'
.' alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);'
.' else alert("An unknown error occurred.");'
.'}'
.'function onGDirectionsLoad(){ '
.' var poly = gdir.getPolyline();'
.' if (poly.getVertexCount() > 100) {'
.' // alert("The pictured route has been simplified due to the high number of directional changes.");'
.' return;'
.' }'
.' var baseUrl = "http://maps.google.com/staticmap?";'
.' var params = [];'
.' var markersArray = [];'
.' markersArray.push(poly.getVertex(0).toUrlValue(5) + ",greena");'
.' markersArray.push(poly.getVertex(poly.getVertexCount()-1).toUrlValue(5) + ",greenb");'
.' params.push("markers=" + markersArray.join("|"));'
.' var polyParams = "rgba:0x0000FF80,weight:5|";'
.' var polyLatLngs = [];'
.' for (var j = 0; j < poly.getVertexCount(); j++) {'
.' polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) + "," + poly.getVertex(j).lng().toFixed(5));'
.' }'
.' params.push("path=" + polyParams + polyLatLngs.join("|"));'
.' params.push("size=300x300");'
.' params.push("key=THISISMYGOOGLEMAPSAPICODE");'
.' baseUrl += params.join("&");'
.' var extraParams = [];'
.' extraParams.push("center=" + map.getCenter().lat().toFixed(6) + "," + map.getCenter().lng().toFixed(6));'
.' extraParams.push("zoom=" + map.getZoom());'
.' addImg(baseUrl + "&" + extraParams.join("&"), "staticMapOverviewIMG");'
.' var extraParams = [];'
.' extraParams.push("center=" + poly.getVertex(0).toUrlValue(5));'
.' extraParams.push("zoom=" + 15);'
.' addImg(baseUrl + "&" + extraParams.join("&"), "staticMapStartIMG");'
.' var extraParams = [];'
.' extraParams.push("center=" + poly.getVertex(poly.getVertexCount()-1).toUrlValue(5));'
.' extraParams.push("zoom=" + 15);'
.' addImg(baseUrl + "&" + extraParams.join("&"), "staticMapEndIMG");'
.'}'
.'function addImg(url, id) {'
.' var img = document.createElement("img");'
.' img.src = url;'
.' document.getElementById(id).innerHTML = "";'
.' document.getElementById(id).appendChild(img);'
.'}'
return $outputStr;
}
function createMapID(){
return preg_replace('/[^a-z\-]/', '', $this->MapName);
}
}