Help Numbering GoogleMap Markers

[stoopkid]

I've been at this for about a week now, and still can't get my Google Map to properly number the markers. Any help would be greatly appreciated. I've done enough "googling" on the subject matter, and finally needed to make a forum thread.

My JavaScript code:

<script type="text/javascript">
   	function load() {
		var url = document.location.href;
     
	    
			
		if (url.match("view")) {
		  var map_url = 'single_site.php'; 
		  } else {
		  var map_url = 'phpsqlajax_genxml2.php';
		   if (GBrowserIsCompatible()) {
		
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(41.9034,-87.627944),13);
		  GDownloadUrl(map_url, 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 area = markers[i].getAttribute("area");
			var pic = markers[i].getAttribute("pic");
			var num = markers[i].getAttribute("num");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type, pic, area, num);
            map.addOverlay(marker);
			}
			});
		  
		  
		  }
		  
		  
        
      }
    }
	//THIS IS WHERE THE MARKER NUMBERING BEGINS
	var num = '1';
    var iconRed = new GIcon(); 
    iconRed.image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + num +"|666666|000000";
	//'http://www.millenniumparkplaza.com/bjb/site/images/dot.jpg';
    //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["apt"] = iconRed;

    function createMarker(point, name, address, type, pic, area, num) {
      var marker = new GMarker(point, customIcons[type]);
      //var html = "<h2>Address: " + address + "</h2> <br/>" + area;
	  var html = "<h2>Address</h2> <b>" + address + "</b> <br/>" + area + "<img src=\"" + pic + "\" width=\"100px\" height=\"100px\" style=\"float:right;\">";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    </script>

Any help would be greatly appreciated. It's set to "1" so that it doesn't error out, but I simply can't get the markers to display 1,2,3,4,5...etc based on my search results.

The live version is here: http://www.millenniumparkplaza.com/bjb/site/index.php?p=properties

Thank you for any help that can be provided. I am a JavaScript beginner, but well familiar with PHP.

[Airshow]

sK,

That's Google Maps V2 code, which is deprecated.

If you convert to V3 then I may be able to help.

Airshow

[Airshow]

If you absolutely have to stick with V2, then try this:

function load() {
	var address, area, i, map, map_url, marker, markers, name, num, pic, point, type, xml;
	var url = document.location.href;
	if (url.match("view")) {
		map_url = 'single_site.php'; 
	}
	else {
		map_url = 'phpsqlajax_genxml2.php';
		if (GBrowserIsCompatible()) {
			map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
			map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(41.9034, -87.627944), 13);
			GDownloadUrl(map_url, function(data) {
				xml = GXml.parse(data);
				markers = xml.documentElement.getElementsByTagName("marker");
				for (i=0; i<markers.length; i++) {
					name = markers[i].getAttribute("name");
					address = markers[i].getAttribute("address");
					type = markers[i].getAttribute("type");
					area = markers[i].getAttribute("area");
					pic = markers[i].getAttribute("pic");
					num = markers[i].getAttribute("num");
					point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
					marker = createMarker(point, name, address, type, pic, area, num);
					map.addOverlay(marker);
				}
			});
		}
	}
}

var customIcons = [];

function createMarker(point, name, address, type, pic, area, num) {
	var icon;
	if(!customIcons[type]) {
		customIcons[type] = [];//array of numbered icon variants for the type.
	}
	if(!customIcons[type][num]) {
		icon = new GIcon(); 
		icon.image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + num + "|666666|000000";
		//'http://www.millenniumparkplaza.com/bjb/site/images/dot.jpg';
		icon.shadowSize = new GSize(22, 20);
		icon.iconAnchor = new GPoint(6, 20);
		icon.infoWindowAnchor = new GPoint(5, 1);
		customIcons[type][num] = icon;
	}
	var marker = new GMarker(point, customIcons[type][num]);
	var html = '<h2>Address</h2> <b>' + address + '</b> <br/>' + area + '<img src="' + pic + '" width="100p" height="100px" style="float:right;">';
	GEvent.addListener(marker, 'click', function() {
		marker.openInfoWindowHtml(html);
	});
	return marker;
}

untested

Airshow