Hey guys I have created an xml file which holds all my google map api markers information. The markers are all in tags called marker and I have 6 sets, and I want a line break between the 6 sets. The markers are activated by links which are activated whne checkboxes are clicked, but so far when all checkboxes are clicked the whole bunch of links appear one after another I need a space between them. I tried to do this in the javascript but could only get a line break between every marker not the sets which is no use, then I set blank markers in between the sets, this worked put put marjers in at the top left of the map, again no use.
Here is the javascript code:
function initialize() {
if (GBrowserIsCompatible()) {
window.gmarkers = [];
var gicons = [];
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.iconAnchor = new GPoint(9,34);
baseIcon.iconSize = new GSize(20,34);
baseIcon.infoWindowAnchor = new GPoint(9,2);
// A function to create the marker and set up the event window
function createMarker(point,name,html,category) {
var marker = new GMarker(point,gicons[category]);
// === Store the category and name info as a marker properties ===
marker.mycategory = category;
marker.myname = name;
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
window.gmarkers.push(marker);
return marker;
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<window.gmarkers.length; i++) {
if (window.gmarkers[i].mycategory == category) {
window.gmarkers[i].show();
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<window.gmarkers.length; i++) {
if (window.gmarkers[i].mycategory == category) {
window.gmarkers[i].hide();
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
map.closeInfoWindow();
}
// == a checkbox has been clicked ==
function boxclick(category) {
var box = this;
var category = box.id.substr(0, box.id.length - 3);
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
document.getElementById('bandsbox').onclick = boxclick;
document.getElementById('panteramembersbox').onclick = boxclick;
document.getElementById('rammsteinmembersbox').onclick = boxclick;
document.getElementById('cobmembersbox').onclick = boxclick;
document.getElementById('inflamesmembersbox').onclick = boxclick;
document.getElementById('machineheadmembersbox').onclick = boxclick;
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<window.gmarkers.length; i++) {
if (!window.gmarkers[i].isHidden()) {
html += '<a href="javascript:myclick(' + i + ')">' + window.gmarkers[i].myname + '<\\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(55.7465,-40.4629), 2);
// Read the data
GDownloadUrl("categories.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = markers[i].getAttribute("html");
var html = "<b>"+name+"<\\/b><p>"+address+"</p>"+html;
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point,name,html,category);
map.addOverlay(marker);
}
// == show or hide the categories initially ==
show("bands");
hide("panteramembers");
hide("rammsteinmembers");
hide("rammsteinmembers");
hide("cobmembers");
hide("inflamesmembers");
hide("machineheadmembers");
// == create the initial sidebar ==
makeSidebar();
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
}
function myclick(i) {
GEvent.trigger(window.gmarkers[i],"click");
}
here is some of the xml which i need split up:
<markers>
<marker lat="30.2672" lng="-97.7431"
name="Pantera"
address="Austin, Texas"
html='The number one best heavy metal band in the world!<br><a href="http://www.pantera.com" target ="_blank" >Pantera website</a><br><br>'
category="bands"
label="Marker One"
/>
<marker lat="52.5234" lng="13.4114 "
name="Rammstein"
address="Berlin, Germany"
html='The number two best heavy metal band in the world!<br><a href="http://www.rammstein.com/en" target ="_blank" >Rammstein website</a><br><br>'
category="bands"
label="Marker Two"
/>
<marker lat="60.1698" lng="24.9382 "
name="Children of Bodom"
address="Helsinki, Finland"
html='The number three best heavy metal band in the world!<br><a href="http://www.cobhc.com/" target ="_blank" >Children of Bodom website</a><br><br>'
category="bands"
label="Marker Three"
/>
<marker lat="57.6970" lng=" 11.9865 "
name="In Flames"
address="Gothenburg, Sweden"
html='The number four best heavy metal band in the world!<br><a href="http://www.inflames.com/" target ="_blank" >In Flames website</a><br><br>'
category="bands"
label="Marker Four"
/>
<marker lat="37.8044" lng="-122.2711 "
name="Machine head"
address="Oakland, California"
html='The number five best heavy metal band in the world!<br><a href="http://www.machinehead1.com/" target ="_blank" >Machine Head website</a><br><br>'
category="bands"
label="Marker Five"
/>
<!-- Pantera Band members -->
<marker lat="29.9647" lng="-90.0706 "
name="Philip Anselmo of Pantera"
address="New Orleans, Louisiana"
html='Pantera singer<br><a href="http://en.wikipedia.org/wiki/Phil_Anselmo/" target ="_blank" >Philip Anselmo website</a><br><br>'
category="panteramembers"
label="Marker Six"
/>
<marker lat="29.2672" lng="-96.7431"
name="Dimebag Darrell of Pantera"
address="Austin, Texas"
html='Pantera Guitarist<br><a href="http://en.wikipedia.org/wiki/Dimebag_Darrell" target ="_blank" >Dimebag Darrell website</a><br><br>'
category="panteramembers"
label="Marker Seven"
/>
<marker lat="31.2672" lng="-98.7431"
name="Vinnie Paul of Pantera"
address="Austin, Texas"
html='Pantera Drummer<br><a href="http://en.wikipedia.org/wiki/Vinnie_Paul" target ="_blank" >Vinnie Paul website</a><br><br>'
category="panteramembers"
label="Marker Eight"
/>
<marker lat="33.1071" lng="-98.5895 "
name="Rex Brown of Pantera"
address="Graham, Texas"
html='Pantera Bassist<br><a href="http://en.wikipedia.org/wiki/Rex_Brown" target ="_blank" >Rex Brown website</a><br><br>'
category="panteramembers"
label="Marker Nine"
/>
<!-- Rammstein Band members -->
<marker lat="51.3397" lng="12.3714 "
name="Till Lindeman of Rammstein"
address="Leipzig, Germany"
html='Rammstein Singer<br><a href="http://en.wikipedia.org/wiki/Till_Lindemann" target ="_blank" >Till Lindeman website</a><br><br>'
category="rammsteinmembers"
label="Marker Ten"
/>
<marker lat="51.8731" lng="12.6242 "
name="Richard Kruspe of Rammstein"
address="Wittenberg, Germany"
html='Rammstein Guitarist<br><a href="http://en.wikipedia.org/wiki/Richard_Z._Kruspe" target ="_blank" >Richard Kruspe website</a><br><br>'
category="rammsteinmembers"
label="Marker Eleven"
/>
<marker lat="52.5000" lng="13.4000 "
name="Flake of Rammstein"
address="Berlin, Germany"
html='Rammstein Keyboarder<br><a href="http://en.wikipedia.org/wiki/Christian_Lorenz" target ="_blank" >Flake website</a><br><br>'
category="rammsteinmembers"
label="Marker Twelve"
/>
<marker lat="52.5999" lng="13.4000 "
name="Christoph Scneider of Rammstein"
address="Berlin, Germany"
html='Rammstein Drummer<br><a href="http://en.wikipedia.org/wiki/Christoph_Schneider" target ="_blank" >Christoph schneider website</a><br><br>'
category="rammsteinmembers"
label="Marker Thirteen"
/>
<marker lat="52.5888" lng="13.4000 "
name="Paul Landers of Rammstein"
address="Berlin, Germany"
html='Rammstein Guitarist<br><a href="http://en.wikipedia.org/wiki/Paul_Landers" target ="_blank" >Paul Landers website</a><br><br>'
category="rammsteinmembers"
label="Marker Fourteen"
/>
<marker lat="52.5777" lng="13.4000 "
name="Oliver Riedel of Rammstein"
address="Leipzig, Germany"
html='Rammstein Bassist<br><a href="http://en.wikipedia.org/wiki/Oliver_Riedel" target ="_blank" >Oliver Riedel website</a><br><br>'
category="rammsteinmembers"
label="Marker Fifteen"
/>
Thanks to anyone who can provide a solution!