// javascript from http://www.econym.demon.co.uk/googlemaps/examples/maptips4.htm
  function showmap(latitude, longitude, zoomlevel, stationid) {
    if (GBrowserIsCompatible()) {
      var gmarkers = [];
      var htmls = [];
      var i = 0;

      //      var undefined; 
      //      if (latitude === undefined) {
      //        latitude = 49.20;
      //       zoomlevel=8;        
      //      } 
      //      if (longitude === undefined) {
      //        longitude = 235.42;
      //       zoomlevel=8; 
      //      }

      // ====== set up icon to use ======================
      var icon = new GIcon();
      icon.image = "http://www.victoriaweather.ca/images/mm_20_red.png";
      icon.shadow = "http://www.victoriaweather.ca/images/mm_20_shadow.png";
      //      icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
      //      icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
      icon.iconSize = new GSize(12, 20);
      icon.shadowSize = new GSize(22, 20);
      icon.iconAnchor = new GPoint(6, 20);
      icon.infoWindowAnchor = new GPoint(5, 1);

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,icon,id) {

        var marker = new GMarker(point,icon);
        // === store the name so that the tooltip function can use it ===
        marker.tooltip = '<div class="tooltip">'+name+'</div>';
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        i++;
        map.addOverlay(marker);
   
        if ((stationid == id) && (stationid != 0)){
          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"
        });        

	//        if (zoomlevel < 14) {
          tooltip.style.visibility="visible"
	    //	}

      }

      // ====== This function displays the tooltip ======
      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";
      }

      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());	
      map.addControl(new GMapTypeControl());
      //      map.setCenter(new GLatLng(49.20,-124.58), 8);

      //      map.setCenter(new GLatLng(49.20,235.42), 8);
      map.setCenter(new GLatLng(latitude,longitude), zoomlevel);

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

     // Read the data from stations.xml
      var request = GXmlHttp.create();
      request.open("GET", "stations/stations.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          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("long"));
            var point = new GLatLng(lat,lng);
            var label = markers[i].getAttribute("name");
            var id = markers[i].getAttribute("id");
            var tag = markers[i].getAttribute("tag");
	    var html = '<div class="wsymbol">'
                      + '<p><a href="http://www.victoriaweather.ca/station.php?id='+id+'" target="_blank" >'
                      + label + '</a></p>'
                      + '<a href = "http://www.victoriaweather.ca/information.php#wsymbol">'
                      + '<img src="http://www.victoriaweather.ca/stations/' + tag  + '/' + tag + '_wsymbol.png"'
                      + ' class="wsymbol">'
                      + '</a>'
                      + '</div>';
	    //	        html = html + '<iframe src="http://www.victoriaweather.ca/current.php?id='+id+'"></iframe>';
            // create the marker
            var marker = createMarker(point,label,html,icon,id);
          }

        }
      }
      request.send(null);
    }
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
  }