Google Maps - Markører og infoWindow

Markøren i Google Maps (indsæt billede) er nok et af verdens mest kendte ikoner. (Den kan være erstattet af et lille billede).

Google's 'dråbe' anvendes default som markør. Den kan dog overskrives ved i stedet at indsætte et billede. Ved at søge på 'google marker' kan vælges blandt et ganske stort antal freeware markører - eller man kan lave dem selv..

Til en markør kan knyttes et info vindue med relevant tekst.

Markør

Markører kan indsættes i et kort på flere måder, hvoraf nogle er vist i tabellen nedenfor.

Udgangspunktet for opbygning af markørkode er, at hver enkelt markør etableres som sin egen instans inde i 'function initialize() {}:'. Den kan se sådan ud:

Dråben:

var markernavn = new google.maps.Marker({
    position: new google.maps.LatLng(-25.363882,131.044922),
    map: kortnavn,
    title: 'title'
});

- markørnavn: markørens individuelle navn. Det navn, der skal bruges ved reference til den.<
- position: den position, hvorpå markøren skal vises.
- map: navn på det kort markøren skal anvendes i.
- title: evt. 'mouse-over' title for markøren. Som 'title' ved billeder

Billede:

var billedenavn = 'billedets sti og navn';

var markernavn = new google.maps.Marker({
    position: new google.maps.LatLng(-25.363882,131.044922),
    map: kortnavn, //Navn på et kort markøren skal anvendes i.
    icon: billednavn, //Navn på billede
    title: 'title' // Evt. 'mouse-over' title for markøren. Som 'title' ved billeder
});

- var billednavn: sti til og navn på billedet.
- icon: variabelnavnet.

En billedhøjde på 30-35 px synes passende.

infoWindow

Der kan knyttes et 'infoWindow' til hver markør. Det kan gøres på lidt forskellig vis som det ses nedenfor:

Dynamisk bredde:

Info vindue uden begrænsning på bredden:

var infowindow = new google.maps.InfoWindow({
content:"Ca. her (i Peberrenden) blev vikingeskibene fundet i 1962"
});
infowindow.open(map,peberholm)

Max. bredde:

Info vindue med begrænsning på bredden:

var infowindow = new google.maps.InfoWindow({
content:"Eskildsø er med 1,4 km² den største ø i Roskilde Fjord",
maxWidth: 200
});
infowindow.open(map,marker);

Tekst som variabel:

Ved store tekster kan det være hensigtsmæssigt at opbygge den som en variabel, og så knytte den til 'content'-parameteret.

Der kan gøres fuld brug af HTML og CSS. Såfremt teksten bliver for stor i.f.t. kortet indsættes scroll-bar automatisk.

var rejeWindow = '<div id="content">'+
   '<div id="siteNotice">'+
   '</div>'+
   '<h2 id="firstHeading" class="firstHeading">Roskilderejen</h2>'+
   '<div id="bodyContent">'+
   '<p class="m1"><b>Roskilderejen</b> (Palaemon adspersus),'+
   ' er en af de fire arter <b>Fjordrejer</b> der er almindelige i de danske fjorde. ' +
   'Det er den mest almindelige af de fire arter. '+
   'Den kaldes også "Almindelig reje".</p>'+
   '<p class="m1">Trods navnet findes den i Roskilde Fjord kun i Kattinge Vig</p>'+
   '<p class="m2"><img src="roskildereje.jpg"></p> '+
   '<p class ="m0">Link: <a href="http://forskning.skaldyrcenter.dk/media/32386/Bilag_Fjordrejer_i_danske_farvande-biologi_og_fiskeri.pdf">Se pdf-rapport</a></p>'+
   '</div>'+
   '</div>';

   var infowindow = new google.maps.InfoWindow({
      content: rejeWindow
      });

Vis fra start eller ved klik:

Info-vinduet kan vises fra start eller ved klik på markør:

Vis fra start uden mulighed for genstart:

infowindow.open(map,rejer)

Vis ved klik på markør med mulighed for genstart:

google.maps.event.addListener(rejer, 'click', function() {
infowindow.open(map,rejer);
});

Kort

De ovenfor beskrevne funktionaliteter vedr. markører og info vindue er indbygget i kortet.