Hi..

I've defined two document types: GoogleMap and GoogleMapPoint, where GoogleMapPoint have a property location which use Google Maps Datatype to select to coordinates.

Then I have a parent node Google Map ( nodeID =1157 ) and a child node for each marker.

In the razor code I have this, which also list the coordinates for each node:

@using umbraco.MacroEngines

<div class="map" id="map">
  @{
    dynamic node = new DynamicNode(1157);
    var children = node.Children;
  }
  
  @foreach(var page in children.Where("umbracoNaviHide!=true")) {
    <div id="@page.Index()">@page.Location</div>
    
  }
</div>
<div id="marker_list"></div>

Now I would like to list each coordinates in an array, so it's created dynamically:

var infoWnd, mapCanvas;

function initialize() {
  var mapId = "map";
  //Creates a map object.
  var mapDiv = document.getElementById(mapId);
  
  if(document.getElementById(mapId) == null) {
    return;
  }
  
  var mapsElement = document.getElementById("0"); // mapId
  var coords = mapsElement.innerHTML.split(",");
  if (coords.length != 3) {
    mapsElement.display = "none";
    return;
  }
  
  var mapsElement2 = document.getElementById("1");
  var coords2 = mapsElement2.innerHTML.split(",");
  mapsElement2.display = "none";
  
  var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1]));  // arrays to hold copies of the markers
  
  var locations = [
    //{"latlng":[55.73363,9.58101],name:"Advice House",address:"Lysholt Allé 10",zip:"7100",city:"Vejle"},
    {"latlng":[parseFloat(coords[0]),parseFloat(coords[1])],name:locationTitle1,address:"Lysholt Allé 10",zip:"7100",city:"Vejle"},
    {"latlng":[parseFloat(coords2[0]),parseFloat(coords2[1])],name:locationTitle2,address:"Sysselvej 11",zip:"7100",city:"Vejle"}
  ];
  
  var myOptions = {
    //zoom: parseFloat(coords[2]),
    //center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP, //HYBRID - ROADMAP - SATELLITE - TERRAIN
    disableDefaultUI: true,
    mapTypeControl: true,
    zoomControl: true,
    scaleControl: true,
    streetViewControl: true,
    mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT }, //DEFAULT - DROPDOWN_MENU - HORIZONTAL_BAR
    zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } //SMALL - DEFAULT - LARGE
  };
  
  mapCanvas = new google.maps.Map(mapDiv, myOptions);
  //mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
  
  //Creates a infowindow object.
  infoWnd = new google.maps.InfoWindow();
  
  //Mapping markers on the map
  var bounds = new google.maps.LatLngBounds();
  var location, i, latlng;
  for (i in locations) {
    //Creates a marker
    location = locations[i];
    latlng = new google.maps.LatLng(location.latlng[0], location.latlng[1]);
    bounds.extend(latlng);
    var marker = createMarker(
      mapCanvas, latlng, location.name, location.address, location.zip, location.city
    );
    
    //Creates a sidebar button for the marker
    createMarkerButton(marker);
  }
  //Fits the map bounds
  mapCanvas.fitBounds(bounds);
}


function createMarker(map, latlng, title, address, zip, city) {
  
  var image = new google.maps.MarkerImage(
    '/gfx/marker.png',
    new google.maps.Size(26,40),
    new google.maps.Point(0,0),
    new google.maps.Point(13,40)
  );
  var shadow = new google.maps.MarkerImage(
    '/gfx/marker_shadow.png',
    new google.maps.Size(50,40),
    new google.maps.Point(0,0),
    new google.maps.Point(13,40)
  );
  
  var shape = {
    coord: [24,0,25,1,25,2,25,3,25,4,25,5,25,6,25,7,25,8,25,9,25,10,25,11,25,12,25,13,25,14,25,15,25,16,25,17,25,18,25,19,25,20,25,21,25,22,25,23,25,24,24,25,17,26,16,27,16,28,16,29,15,30,15,31,15,32,15,33,14,34,14,35,14,36,14,37,13,38,14,39,12,39,12,38,12,37,12,36,11,35,11,34,11,33,11,32,10,31,10,30,10,29,10,28,9,27,9,26,2,25,1,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,0,3,0,2,1,1,2,0,24,0],
    type: 'poly'
  };
  
  //Creates a marker
  var marker = new google.maps.Marker({
    position : latlng,
    map : map,
    title : title,
    icon: image,
    shadow: shadow,
    shape: shape
  });
  
  //The infoWindow is opened when the sidebar button is clicked
  google.maps.event.addListener(marker, "click", function(){
    infoWnd.setContent("<strong>" + title + "</strong><p>" + address + "<br/>" + zip + " " + city + "</p><a href='http://findvej.dk/" + address + "," + zip + "' target='_blank'>Find vej</a>");
    infoWnd.open(map, marker);
  });
  return marker;
}

function createMarkerButton(marker) {
  //Creates a sidebar button
  var ul = document.getElementById("marker_list");
  var li = document.createElement("li");
  var title = marker.getTitle();
  li.innerHTML = title;
  ul.appendChild(li);
  
  //Trigger a click event to marker when the button is clicked.
  google.maps.event.addDomListener(li, "click", function(){
    google.maps.event.trigger(marker, "click");
  });
}
google.maps.event.addDomListener(window, "load", initialize);

Right now it's hard coded to get the div element with index as id: 
<div id="@page.Index()">@page.Location</div>

So this to be dynamic.. and also I was looking for a way to name to id like a string + an index.. e.g. coords1, coords2... etc. but I think I was missing something to separate the razor code from html as [email protected]() doesn't work..

/Bjarne