var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/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 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/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["bleu"] = iconBlue;
    customIcons["rouge"] = iconRed;
				var map;
				var marker = [];
				var html = [];
				var tooltip;

    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(48.86556, 2.34194));

		      // ====== set up marker mouseover tooltip div ======
  		    tooltip = document.createElement("div");
    		  map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
      		tooltip.style.visibility="hidden";

								//url
        GDownloadUrl(url, function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
       			map.clearOverlays();

       			var bounds = new GLatLngBounds();
          for (var i = 0; i < markers.length; i++) {
            var id = markers[i].getAttribute("id");
            var name = markers[i].getAttribute("nom");
            var address = markers[i].getAttribute("codeinsee");
            var ville_url = markers[i].getAttribute("ville_url");
            var type = 'rouge';
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lati")),
                                    parseFloat(markers[i].getAttribute("longi")));
												var buf = '<span style="font-weight:bold;">' + name + '</span>';
												buf += ' (<a href="' + ville_url + '">+infos</a>)'; 

												//photos de la ville
												var photos = markers[i].getElementsByTagName("photo");
												var photo_url = null;
												buf += '<br />';
												for (var k = 0; k < photos.length; k++) {
														photo_url = photos[k].getAttribute("url");
														buf += '<img style="margin: 5px 5px 5px 0;" src="resize.php?image=villesGaleries/'+address+'/'+ photo_url + '&amp;width=50&amp;height=50" width="50" height="50" />';
												}

												//categories
												var categories = markers[i].getElementsByTagName("category");
												var cat_id = null;
												var cat_nom = null;
												var cat_nb = null;
												var cat_url = null;
												for (var j = 0; j < categories.length; j++) {
														cat_id = categories[j].getAttribute("id");
														cat_nom = categories[j].getAttribute("nom");
														cat_nb = categories[j].getAttribute("nb");
														cat_url = categories[j].getAttribute("url");
														buf += '<br /><a href="'+ cat_url + '">' + cat_nom + '</a> : x' + cat_nb;
												}



												//var buf = name + '<br />' + cat_nom + ' x' + cat_nb; 
												html[id] = buf;
            marker[id] = createMarker(point, name, html[id], type);
            map.addOverlay(marker[id]);
         			bounds.extend(point);
          }
							if(map.getBoundsZoomLevel(bounds) > 10) zoom=10; else zoom=map.getBoundsZoomLevel(bounds);
       //map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
							map.setCenter(bounds.getCenter(), zoom);
        });
      }
    }

    function createMarker(point, name, html, type) {
      var marker = new GMarker(point, customIcons[type]);
						marker.tooltip = '<div class="tooltip nobr"><span class="">'+name+'</span><br /><span style="font-size:9px">cliquez pour + infos</span></div>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
        //  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        });
      return marker;
    }

      // ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a side_bar mouseover
      function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var height=tooltip.clientHeight;
	var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }