SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    duplicate my side_bar_html string, problem with code - novice please help

    Hi all

    I have a list of companies in my 'side_bar' <div> for my Google map which is created from my side_bar_html which is loaded from my xml/php file just as a list of records, just a standard select *. I need away to separate this list into the different types/companies with my .js file.

    I'm not quite sure how else to explain this, still trying to get to grips with the syntax hope am making sense?

    I've posted the bits of code I think needs to be altered/added to below:

    Code JavaScript:
    var side_bar_html = "";
    		var gmarkers = [];
    		var i = 0;

    The code - you can probably ignore most of this... just the bottom line:
    Code JavaScript:
    GDownloadUrl("google_xml_test.php", 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 web = markers[i].getAttribute("web");
                var type = markers[i].getAttribute("type");
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
                var marker = createMarker(point, name, address, web, type);
                gps.addOverlay(marker);
     
    			document.getElementById("side_bar").innerHTML = side_bar_html;
              }

    This is what returns the list
    Code JavaScript:
    gmarkers[i] = marker;
    	  side_bar_html += '<a href="javascript:myclick(' + i + ')"><strong>' + name + '</strong></a><br />';
    		i++;
     
          return marker;

    I need to break this up in to side_bar, side_bar1, side_bar2 etc so I can separate the different types of companies into there own div container and not just a big unsorted list in one div container?

    Any suggestions?
    Last edited by computerbarry; Aug 3, 2008 at 12:52.

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update:

    I've managed to apply what I think needs doing from a tutorial but somethings not right? The map loads but not the markers; can anybody spot the problem with my code below?

    Big thanks

    Code JavaScript:
     
        var customIcons = [];
        customIcons["high"] = iconBlue;
        customIcons["medium"] = iconRed;
    	customIcons["low"] = iconGreen;
     
    		var gmarkers = [];
    		var htmls = [];
    		var i = 0;
     
     
        function load() {
          if (GBrowserIsCompatible()) {
            var gps = new GMap2(document.getElementById("gps"));
    	  	gps.addControl(new GSmallMapControl());
    		gps.addControl(new GOverviewMapControl(new GSize(100,100)));
    		gps.setCenter(new GLatLng(00.000000, -0.000000), 15);
     
            // An array of sidebars
          var sidebar_html = ["","",""];
          // Number of sidebar columns
          var sidebars = sidebar_html.length;
     
    		GDownloadUrl("google_xml_test.php", 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 web = markers[i].getAttribute("web");
    			var social = markers[i].getAttribute("social");
                var type = markers[i].getAttribute("type");
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
                var marker = createMarker(point, name, address, web, social, type);
                gps.addOverlay(marker);
     
    			// document.getElementById("side_bar").innerHTML = side_bar_html;
    			document.getElementById("sidebar0").innerHTML = sidebar_html[0];
    			document.getElementById("sidebar1").innerHTML = sidebar_html[1];
    			document.getElementById("sidebar2").innerHTML = sidebar_html[2];
              }
     
            });
          }
        }
     
        function createMarker(point, name, address, web, social, type) {
          var marker = new GMarker(point, customIcons[type]);
     
    	  var html = '<b>' + name + '</b> <br />';
    		html += address + '<br /><br />';
    		html += '<a target="_blank" ' + 'href="http://' + web + '"><strong>';
    		html += web + '</strong></a><br />';
    		html += social;
     
    	  GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
          });
     
    	  gmarkers[i] = marker;
    	  htmls[i] = html;
     
    	  // ======= Add the sidebar entry to one of the sidebars =====
            side_html = '<a href="javascript:myclick(' + i + ')"><strong>' + name + '</strong></a><br />';
            sidebar_html[i&#37;sidebars] += side_html;
            // ==========================================================
     
    	  i++;
          return marker;
        }
     
    	function myclick(i) {
            gmarkers[i].openInfoWindowHtml(htmls[i]);
          }

    Cheers

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Please provide a simplified version of your html along with the javascript so that we can perform local tests as well. Either that or a link to the page with the trouble.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •