Efter gårdagens trixande med Google Maps API har nu den nya kartan över Lübeck gått live. Ändringarna bestod i att skapa markörer i olika färger, samt hämta alla uppgifter från en XML-fil istället för att skriva in dem direkt i Javascript-koden. Beroende på vilken kategori en plats som en markör märker ut visas de i en viss färg. Smidigt för att göra det tydligt för besökaren var t.ex. de flesta hotellen är belägna. Det går nu också att välja vilka markörer som ska visas genom att man markerar en checkbox framför varje kategori. På så sätt kan man låta besökaren rensa bort de markörer som de tycker är ointressanta.
Så här gör man markörer i olika färger
Vi börjar med den sida som kartan ska visas på. Där ska du lägga till följande mellan head-taggarna:
<script type="text/javascript" src="/includes/googlemaps.js"></script>
Sidans body-tagg ska se ut så här:
<body onload="load()" onunload="GUnload()">
Sedan skapar du en div som ska visa kartan:
<div id="map_canvas" style="width: 560px; height: 460px;"></div>
Därefter fortsätter vi med filen som jag väljer att kalla googlemaps.js som ska importeras. Detta är den kod som laddar kartan och här bestämmer du t.ex. var den ska fokusera och hur långt inzoomad den ska vara.
<script src="https://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA5_z27XiV9IUwFjySmL26Twi6fo-Ki2hRGzIEzOIGoH2zKVDNT8MNja1mdng"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'images/graphics/mm_20_blue.png';
iconBlue.shadow = 'images/graphics/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'images/graphics/mm_20_red.png';
iconRed.shadow = 'images/graphics/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurang"] = iconBlue;
customIcons["hotell"] = iconRed;
var markerGroups = { "restaurang": [], "hotell": []};
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(53.86892, 10.67165), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
GDownloadUrl("includes/markerdata.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[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var link = markers[i].getAttribute("link");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, link);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type, link) {
var marker = new GMarker(point, customIcons[type]);
markerGroups[type].push(marker);
var html = "<p class='maptitle'>" + name + "</p><p class='mapadress'>" + address +"</p><p class='maptext'><a href='"+ link +"' class='intmap'>Läs mer om " + name + "</a></p>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (marker.isHidden()) {
marker.show();
} else {
marker.hide();
}
}
}
//]]>
</script>
Slutligen kommer vi till XML-filen (markerdata.xml) som innehåller information om alla markörer.
<markers> <marker name="Hotel Alter Speicher" address="Beckergrube 77" lat="53.869598" lng="10.680524" type="hotell"/> <marker name="Historischer Weinkeller" address="Koberg 8" lat="53.87097" lng="10.69079" type="restaurang"/> </markers>
Det ska vara det hela. Nu ska du ha en karta som visar markörer i olika färger beroende på vad du skrivit in i attributet ”type” i XML-filen.
Visa eller dölj markörer
För att visa eller dölja markörer använder vi oss av checkboxar. Denna kod placerar du förslagsvis under diven som visar kartan.
<input style="background-color: #ff0000; border: 1px solid #ffffff;" onclick="toggleGroup('hotell')" checked="checked" type="checkbox" /> Hotell <br />
<input style="background-color: #ffff00; border: 1px solid #ffffff;" onclick="toggleGroup('restaurang')" checked="checked" type="checkbox" /> Restauranger
Det hade varit trevligt med lite annan formatering på koden, den är väldigt svårläst.
Tack för att du delar med dig
Snygg och bra funktion med markörerna.
Har du testat ”Syntax Highlighter ComPress”? Bra plug-in till WP för att snyggt presentera kod i ett inlägg.
Nu har jag installerat pluginen som du ser. Ser mycket bättre ut, tack!
Tack för tipset! Innan jag skrev inlägget var jag på jakt efter ett plugin men lyckades inte hitta något bra.
Jag får inte kartan (eller markörerna för att vara exakt) att visas överhuvudtaget i Internet Explorer. Blir bara javascript-fel. Någon som har uppfattat det samma?