Tim's Locator is overkill as I don't need user interaction but I'm too noob to figure out how to pirate it. The GM example looks fairly straightforward, thought I could figure it out if I could figure out how to feed it from an array but not really sure how to build an array properly for it.
Trying to strip down Tim's code and use my existing good GM functions, I have constructed this Frankenstein, which is erroring on save with 'Argument missing' and will start killing villagers soon:
@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines;
@{
List<GeoItem> items = new List<GeoItem>();
Location = new Location();
foreach (var node in Model.DescendantsOrSelf("Glacier").OrderBy("LatLon")) {
Location itemLocation = new Location(node.MarkerLatLon,);
items.Add(new GeoItem(node,itemLocation));
}
}
@if(items.Count > 0)
{
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var MapCenterLatLon = new google.maps.LatLng(@Model.LatLon);
var myOptions =
{
center: MapCenterLatLon,
zoom: @Model.zoom,
mapTypeId: google.maps.MapTypeId.@Model.mapTypeID
};
var map = new google.maps.Map(document.getElementById("topimg"), myOptions);
@{int c = 1;}
@foreach(GeoItem geo in items){
dynamic node = ((DynamicNode)geo.Node);
<text>
var mLatlng@(c) = new google.maps.LatLng(MapCenterLatLon);
var marker@(c) = new google.maps.Marker({
position: mLatlng@(c) ,
map: map,
title:"@node.Name"
});
</text>
c++;
}
}
initialize();
</script>
}
For reference, the Google Maps example (slightly stripped down) looks like this:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
// Add markers to the map
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
I'd be glad to go either way, finish my stripped down version of Tim's or build an array for GM's, whatever's best. I also hope to gain some understanding about how arrays get built, if anyone can provide some nuts and bolts for that part too.