|
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
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.
Der kan knyttes et 'infoWindow' til hver markør. Det kan gøres på lidt forskellig vis som det ses nedenfor:
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) |
Info vindue med begrænsning på bredden:
var infowindow = new google.maps.InfoWindow({ content:"Eskildsø er med 1,4 km2 den største ø i Roskilde Fjord", maxWidth: 200 }); infowindow.open(map,marker); |
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 }); |
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); }); |
De ovenfor beskrevne funktionaliteter vedr. markører og info vindue er indbygget i kortet.
<script> //Eskildsø // Kort var myCenter=new google.maps.LatLng(55.733544,12.078236); function initialize() { var mapProp = { center: myCenter, zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); // Markør var marker=new google.maps.Marker({ position: myCenter, title: 'Eskildsø', }); marker.setMap(map); // Info vindue med max. bredde var infowindow = new google.maps.InfoWindow({ content: "Eskildsø er med 1,4 km<sup>2</sup> den største ø i Roskilde Fjord", maxWidth: 200 }); infowindow.open(map,marker); //Peberrenden // Markør med billede var markor = 'pin.png'; var peberholm = new google.maps.Marker({ position: new google.maps.LatLng(55.802342,12.060220), map: map, icon: markor, title: 'Peberrenden' }); // Info vindue var infowindow = new google.maps.InfoWindow({ content:"Ca. her (i Peberrenden) blev vikingeskibene fundet i 1962" }); infowindow.open(map,peberholm) //Fjordrejer // Markør var rejer = new google.maps.Marker({ position: new google.maps.LatLng(55.684166,11.967373), map: map, title: 'Rejer' }); // Variabel med tekst 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 mest / 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>'; // Info vindue med variabel var infowindow = new google.maps.InfoWindow({ content: rejeWindow }); google.maps.event.addListener(rejer, 'click', function() { infowindow.open(map,rejer); }); } //slut på function initialize google.maps.event.addDomListener(window, 'load', initialize); </script> |