Jeg kan ikke WP så godt, men skrev et innlegg om google maps en gang for lenge siden her..
Ta denne siden:
GotoGhana: Kart
Utgangspunktet er at visse artikler kan geo-tagges. Det betyr i mitt tilfelle at jeg har lagt til en tekstfil i artikkel-folderen med lattitude og longitude som kan enkelt leses av en php-fil. Geo-taggingen er manuelt arbeid for hver (aktuell) artikkel.
Viktigste er dette som ligger i body:
<div id="map" style="height:400px; width:520px; float:left; margin-right:20px"></div>
<div id="legend">Kategorier:<br /><div id="group"></div></div>
Dokumentet trenger noen js-ressurser:
<script src="objects/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQ IAAAAfmSoxApw2KKIeS-kxmF4ihRQLB6n5Aw1jKhjQHiN1AlQja_9fhSUdGwCUHE_ClGNE KlN5SGLZClYkA" type="text/javascript"></script>
Denne med maps.google.com inneholder en 'key'.
Du må hente en developer key fra Google selv (denne key'en funker kun for GotoGhana: Forside, så copy & paste funker ikke... hent selv og bytt ut).
Noe script som gjør noe fornuftig med div'en:
var m = new GMap2(document.getElementById("map"));
m.setCenter(new GLatLng(6.785147,-1.098633), 7);
m.addControl(new GLargeMapControl());
m.setMapType(G_HYBRID_MAP);
m blir satt til et nytt objekt (som bruker div med id 'map' som container).
senterpunktet er igjen lattitude,longitude.
addcontrol legger på en control for zooming.
setmaptype setter til kombo av sat+rutenett.
Denne biten skal funke uansett. Test dette først...
Så kommer det en bit som henter punktene fra en xml-fil:
GDownloadUrl("kart_data.xml", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker") ;
for( var i=0; i<markers.length; i++ ) {
var name = markers
.getAttribute("name");
var type = markers.getAttribute("type");
var point = new GLatLng(parseFloat(markers.getAttribute("lat")),parseFloat(markers.getAttribute("lng")));
var marker = createMarker(point, name, type);
m.addOverlay(marker);
}
Hvis xml-filen er lastet, så blir den parset.
For hver entry i xml-dokumentet henter koden name, type og geotag - og anroper createMarker - som lager en marker i rett farge og legger markøren i rett gruppe - kategorisert på type.
Siste kodebit:
var g = document.getElementById("group");
var html = '';
for( mg in markerGroups )
html = html +'<input type="checkbox" onclick="toggleGroup(\'' +mg +'\')" checked="checked" />' +mg +'<br />';
g.innerHTML = html;
Denne biten går gjennom alle gruppene, og lager en input-box for hver gruppe med en onclick=toggleGroup slik at brukeren kan skjule/vise grupper med ikoner. HTML'en legges til slutt i div'en med id "group".
xml-filen lages av php-parseren basert på info som den henter fra artiklene.
http://www.gotoghana.no/kart_data.xml
