How to put in a line break between my map map markers in XML

[deucalion0]

Hey guys, I have a lot of javascript for my google map api and I have all the information stored away in an xml file which the javascrupt reads. I have many map markers but I cannot get a line break between th esets of markers, only each and every marker. I tried this in the xml and in the javascript but I am stuck. If anyone can help me out that would be great. here is a selection of the xml I have:

<markers>

 <marker lat="30.2672" lng="-97.7431" 
 name="Pantera"
 address="Austin, Texas"
    html='The number one best heavy metal band in the world!&lt;br&gt;&lt;a href="http://www.pantera.com" target ="_blank" &gt;Pantera website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
   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!&lt;br&gt;&lt;a href="http://www.rammstein.com/en" target ="_blank" &gt;Rammstein website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
   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!&lt;br&gt;&lt;a href="http://www.cobhc.com/" target ="_blank" &gt;Children of Bodom website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
   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!&lt;br&gt;&lt;a href="http://www.inflames.com/" target ="_blank" &gt;In Flames website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
  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!&lt;br&gt;&lt;a href="http://www.machinehead1.com/" target ="_blank" &gt;Machine Head website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
  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&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Phil_Anselmo/" target ="_blank" &gt;Philip Anselmo website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
  category="panteramembers"
  label="Marker Six" 
 />
 <marker lat="29.2672" lng="-96.7431" 
  name="Dimebag Darrell of Pantera"
 address="Austin, Texas"
    html='Pantera Guitarist&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Dimebag_Darrell" target ="_blank" &gt;Dimebag Darrell website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
  category="panteramembers"
  label="Marker Seven" 
 />
  <marker lat="31.2672" lng="-98.7431" 
  name="Vinnie Paul of Pantera"
 address="Austin, Texas"
 html='Pantera Drummer&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Vinnie_Paul" target ="_blank" &gt;Vinnie Paul website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
  category="panteramembers"
  label="Marker Eight" 
 />
  <marker lat="33.1071" lng="-98.5895 " 
  name="Rex Brown of Pantera"
 address="Graham, Texas"
 html='Pantera Bassist&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Rex_Brown" target ="_blank" &gt;Rex Brown website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
  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&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Till_Lindemann" target ="_blank" &gt;Till Lindeman website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
 category="rammsteinmembers"
  label="Marker Ten" 
 />
     <marker lat="51.8731" lng="12.6242  " 
  name="Richard Kruspe of Rammstein"
  address="Wittenberg, Germany"
 html='Rammstein Guitarist&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Richard_Z._Kruspe" target ="_blank" &gt;Richard Kruspe website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
 category="rammsteinmembers"
  label="Marker Eleven" 
 />
     <marker lat="52.5000" lng="13.4000 " 
  name="Flake of Rammstein"
  address="Berlin, Germany"
 html='Rammstein Keyboarder&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Christian_Lorenz" target ="_blank" &gt;Flake website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
 category="rammsteinmembers"
  label="Marker Twelve" 
 />
    <marker lat="52.5999" lng="13.4000 " 
  name="Christoph Scneider of Rammstein"
  address="Berlin, Germany"
 html='Rammstein Drummer&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Christoph_Schneider" target ="_blank" &gt;Christoph schneider website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
 category="rammsteinmembers"
  label="Marker Thirteen" 
 />
      <marker lat="52.5888" lng="13.4000 " 
  name="Paul Landers of Rammstein"
  address="Berlin, Germany"
 html='Rammstein Guitarist&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Paul_Landers" target ="_blank" &gt;Paul Landers website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
 category="rammsteinmembers"
  label="Marker Fourteen" 
 />
     <marker lat="52.5777" lng="13.4000 " 
  name="Oliver Riedel of Rammstein"
  address="Leipzig, Germany"
 html='Rammstein Bassist&lt;br&gt;&lt;a href="http://en.wikipedia.org/wiki/Oliver_Riedel" target ="_blank" &gt;Oliver Riedel website&lt;/a&gt;&lt;br&gt;&lt;br&gt;'
 category="rammsteinmembers"
  label="Marker Fifteen" 
 />

and the javascript that runs it all:

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");
      }

It is a simple thing I need but I just do not have enough experience with xml. It looks bad when all the checkboxes are ticked and all the markers are shown in the sidebar without breaks between the sets, as its one big clump of links.

Thanks to anyone who can help me out.

[Airshow]

I can tell you in principle how to do this.

First add <markerset>...</markerset> wrappers around each set.

You can give each set attributes to describe it, eg.:
<markerset type="summary" name="summary">...</markerset>
<markerset type="section" name="Pantera">...</markerset>
<markerset type="section" name="Rammstein">...</markerset>

Now, you have something that the javascript can read/interpret to display the markers in sets, eg, to do treat the summary differently from regional groups, to display any one set, to list all sets with dividers, etc. etc.

Airshow

[deucalion0]

Thanks a lot Airshow I appreciate the help. I cannot actually get it to work though, I tried for a while, but is it perhaps because I need to change some of the javascript also?

Thanks!

[Airshow]

Deucalion,

Yes, the javascript needs some changes.

In GDownloadUrlm you need to nest a slighly modified version of the for-loop inside another for-loop.

The outer loop will go through the markersets, and the loop will go through the markers in each markerset in turn.

Code to put dividers in place should be inside the outer loop, but outside the inner loop. You will probably want to suppress either the first or last divider because you need one less divider than the number of markersets. Do this by testing the outer loop's counter.

Alternatively, you could create headers (Pantera, Rammstein etc.) instead of dividers, which is simpler because you will want one header per markerset.

Airshow

[deucalion0]

Thanks Airshow I appreciate your help with this, I will do as you suggested!

Thanks!

[thePhallex]

I'm having trouble with a very similar issue. I'm almost there, just struggling to get it working.

I know I'm having problems with my loops.

Can someone please point me in the right direction?

Here's my XML file:

<data>
	<category label="Casinos">
		<marker lat="38.962837" lng="-119.941972" label="place1" />
		<marker lat="38.961745" lng="-119.93826" label="place2" />
		<marker lat="38.959243" lng="-119.939979" label="place3" />	
		<marker lat="38.96035" lng="-119.942921" label="place4" />
	</category>
	<category label="Restaurants">
		<marker lat="38.9682" lng="-119.930386" label="place5" />
		<marker lat="38.956146" lng="-119.943517" label="place6" />
		<marker lat="38.945361" lng="-119.970683" label="place7" />	
		<marker lat="38.940712" lng="-119.977319" label="place8" />
	</category>
	<category label="Family">
		<marker lat="39.006265" lng="-119.948663" label="place9" />
		<marker lat="38.963338" lng="-119.93731" label="place10" />
		<marker lat="38.955867" lng="-119.942653" label="place11" />	
		<marker lat="38.944539" lng="-119.971468" label="place12" />
	</category>
</data>

and here's my Javascript:

GDownloadUrl("map_locations.xml", function(doc) {
    var xmlDoc = GXml.parse(doc);

    var categories = xmlDoc.documentElement.getElementsByTagName("category");

    for(var c=0; c<categories.length; c++){
        side_bar_html += "<div>"+categories[c].getAttribute("label")+"</div>";

        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

        for (var i = 0, len = markers.length; i < len; ++i) {
            side_bar_html += "<p>" + markers[i].getAttribute("label") + "</p>";
        }

    }

    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("sidebarDiv").innerHTML = side_bar_html;
});

This will show the Categories just fine, but instead of just listing the proper amount of children under each category, it displays all 12 "places" under each category.

What am I missing here?

Thanks in advance!

[Airshow]

thePhallex,

That's because xmlDoc.documentElement.getElementsByTagName("marker"); finds all <marker>s in the document, regardless of category.

Try: var markers = categories[c].getElementsByTagName("marker"); .

Airshow

[thePhallex]

thePhallex,

That's because xmlDoc.documentElement.getElementsByTagName("marker"); finds all <marker>s in the document, regardless of category.

Try: var markers = categories[c].getElementsByTagName("marker"); .

Airshow

Thanks! Strange -- I took a closer look and figured it out the _exact_ same time i got the notification this thread was updated.

[deucalion0]

Thanks very much that worked perfectly for me!

Thanks!!!!!!!