Skab Google Maps med nyt mashup-værktøj

Google har kreeret et nyt beta-værktøj, som gør det muligt at skabe sine helt egne Google Maps. Værktøjet kombinerer Google Spreadsheets med Google Maps, og gør det muligt at opdatere kortets oplysninger løbende.

Ved at indtaste navne, adresser, beskrivelser og koordinater i et Google-regneark kan man benytte værktøjet Google Spreadsheets Map Wizard (se link herunder) til at skabe et Google-kort. Når oplysningerne i regnearket opdateres og gemmes, slår ændringerne med det samme igennem på kortet.

Det sværeste i processen er at finde koordinaterne. Dem kan man finde ved at navigere til det ønskede sted i Google Maps og så bruge knappen "Link to this page" øverst til højre i Google Maps. I browserens adresselinje skal man så fiske koordinaterne ud. Det ser nogenlunde således ud:

ll=55.667505,12.556343

Værktøjet genererer til slut en masse JavaScript-kode, som puttes ind i websiden. Et resultat kan ses herunder.

//"; html += "" + entry["gsx$"+param_titleColumn].$t + ""; var label = entry["gsx$"+param_titleColumn].$t; var rank = 0; if(usingRank && entry["gsx$" + param_rankColumn]) { rank = parseInt(entry["gsx$"+param_rankColumn].$t); } if(entry["gsx$" + param_descriptionColumn]) { html += "" + entry["gsx$"+param_descriptionColumn].$t; } html += "";

  // create the marker
  var marker = cm_createMarker(point,label,html,rank);
  cm_map.addOverlay(marker);
  cm_mapMarkers.push(marker);
  cm_mapHTMLS.push(html);
  bounds.extend(point);

  if(param_useSidebar == true) {
    var markerA = document.createElement("a");
    markerA.setAttribute("href","javascript:cm_markerClicked('" + i +"')");
    markerA.style.color = "#000000";
    var sidebarText= "";
    if(usingRank) {
      sidebarText += rank + ") ";
    } 
    sidebarText += label;
    markerA.appendChild(document.createTextNode(sidebarText));
    sidebarDIV.appendChild(markerA);
    sidebarDIV.appendChild(document.createElement("br"));
    sidebarDIV.appendChild(document.createElement("br"));
  } 
}

}

cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds)); cm_map.setCenter(bounds.getCenter()); }

/** * Creates marker with ranked Icon or blank icon, * depending if rank is defined. Assigns onclick function. * @param {GLatLng} point Point to create marker at * @param {String} title Tooltip title to display for marker * @param {String} html HTML to display in InfoWindow * @param {Number} rank Number rank of marker, used in creating icon * @return {GMarker} Marker created */ function cm_createMarker(point, title, html, rank) { var markerOpts = {}; var nIcon = new GIcon(cm_baseIcon);

if(rank > 0 && rank < 100) { nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconType + "/marker" + rank + ".png"; nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconOverType + "/marker" + rank + ".png"; nIcon.image = nIcon.imageOut; } else { nIcon.imageOut = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconType + "/blank.png"; nIcon.imageOver = "http://gmaps-samples.googlecode.com/svn/trunk/" + "markers/" + param_iconOverType + "/blank.png"; nIcon.image = nIcon.imageOut; }

markerOpts.icon = nIcon; markerOpts.title = title;
var marker = new GMarker(point, markerOpts);

GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); GEvent.addListener(marker, "mouseover", function() { marker.setImage(marker.getIcon().imageOver); }); GEvent.addListener(marker, "mouseout", function() { marker.setImage(marker.getIcon().imageOut); }); GEvent.addListener(marker, "infowindowopen", function() { marker.setImage(marker.getIcon().imageOver); }); GEvent.addListener(marker, "infowindowclose", function() { marker.setImage(marker.getIcon().imageOut); }); return marker; }

/** * Creates a script tag in the page that loads in the * JSON feed for the specified key/ID. * Once loaded, it calls cm_loadMapJSON. */ function cm_getJSON() {

// Retrieve the JSON feed. var script = document.createElement('script');

script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list' + '/' + param_ssKey + '/' + param_wsId + '/public/values' + '?alt=json-in-script&callback=cm_loadMapJSON'); script.setAttribute('id', 'jsonScript'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); }

setTimeout('cm_load()', 500);

//]]>