var map; 
var locations = {};

     /**
     * Add a circle to the global variable "map". This function won't work for circles that encompass
     * the North or South Pole. Also, there is a slight distortion in the upper-left, upper-right,
     * lower-left, and lower-right sections of the circle that worsens as it gets larger and/or closer
     * to a pole.
     * @param lat Latitude in degrees
     * @param lng Longitude in degrees
     * @param radius Radius of the circle in statute miles
     * @param {String} strokeColor Color of the circle outline in HTML hex style, e.g. "#FF0000"
     * @param strokeWidth Width of the circle outline in pixels
     * @param strokeOpacity Opacity of the circle outline between 0.0 and 1.0
     * @param {String} fillColor Color of the inside of the circle in HTML hex style, e.g. "#FF0000"
     * @param fillOpacity Opacity of the inside of the circle between 0.0 and 1.0
     */
   
    function drawCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
      var d2r = Math.PI/180;
      var r2d = 180/Math.PI;
      var Clat = radius * 0.014483;  // Convert statute miles into degrees latitude
      var Clng = Clat/Math.cos(lat*d2r); 
      var Cpoints = []; 
      for (var i=0; i < 33; i++) { 
        var theta = Math.PI * (i/16); 
        Cy = lat + (Clat * Math.sin(theta)); 
        Cx = lng + (Clng * Math.cos(theta)); 
        var P = new GPoint(Cx,Cy); 
        Cpoints.push(P); 
      }
 
      var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
      map.addOverlay(polygon);
     }
     
    function createMarker(stores) {
      var store = stores[0];
      var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"});
      var marker = new GMarker(store.latlng, {icon: newIcon});
      var html = "<b>" + store.name + "</b> <br/>" + store.address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
 
    function createClusteredMarker(stores) {
      var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#ff0000"});
      var marker = new GMarker(stores[0].latlng, {icon: newIcon});
      var html = "";
      for (var i = 0; i < stores.length; i++) {
        html += "<b>" + stores[i].name + "</b> <br/>" + stores[i].address + "<br/>";
      }
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
 
 
    function load() { 
      if (GBrowserIsCompatible()) { 
        map = new GMap2(document.getElementById("map")); 
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setMapType(G_NORMAL_MAP);
        map.setCenter(new GLatLng(47.9690116, 16.2617286), 6); 
        drawCircle(47.9690116, 16.2617286, 59.0, "#000080", 1, 0.30, "#111111",.10);   
        
     GDownloadUrl("fileadmin/hubifly/template/markerdata.xml", 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 latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                  parseFloat(markers[i].getAttribute("lng")));
          var store = {latlng: latlng, name: name, address: address, type: type};
          var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
          latlngHash = latlngHash.replace(".","").replace(".", "").replace("-","");
          if (locations[latlngHash] == null) {
            locations[latlngHash] = []
          }
          locations[latlngHash].push(store);
        }
        for (var latlngHash in locations) {
          var stores = locations[latlngHash];
          if (stores.length > 1) {
            map.addOverlay(createClusteredMarker(stores));
          } else {
            map.addOverlay(createMarker(stores));
          }
         }
      });

 
      
      } 
    }