if (GBrowserIsCompatible()) {
var map;

// === Crea la struttura base delle icone ===
var baseIcon = new GIcon();
          baseIcon.iconSize=new GSize(32,32);
          baseIcon.shadowSize=new GSize(76,35);
          baseIcon.iconAnchor=new GPoint(16,32);
          baseIcon.infoWindowAnchor=new GPoint(16,0);
          
// === Crea un array di GIcons() ===
var gicons = [];
// === Crea l'icona home (TOPIX) ===
gicons["home"] = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon56.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon56s.png");
// === Crea l'icona conference (Castello di Rivoli) ===
gicons["conference"] = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon21.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon21s.png");

    
// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
	this.bounds_ = bounds;
	this.weight_ = opt_weight || 2;
	this.color_ = opt_color || "#888888";
}

Rectangle.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
	// Create the DIV representing our rectangle
	var div = document.createElement("div");
	div.style.border = this.weight_ + "px solid " + this.color_;
	div.style.position = "absolute";

	// Our rectangle is flat against the map, so we add our selves to the
	// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
	// below the marker shadows)
	map.getPane(G_MAP_MAP_PANE).appendChild(div);

	this.map_ = map;
	this.div_ = div;
}

// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
	this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
	return new Rectangle(this.bounds_, this.weight_, this.color_,
		this.backgroundColor_, this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
	// We only need to redraw if the coordinate system has changed
	if (!force) return;

	// Calculate the DIV coordinates of two opposite corners of our bounds to
	// get the size and position of our rectangle
	var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
	var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

	// Now position our DIV based on the DIV coordinates of our bounds
	this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
	this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
	this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
	this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
}


// Funzione che crea il Marker
function createMarker(point1, description , icontype) {
	var marker = new GMarker(point1, gicons[icontype]);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(description);
		});
	            return marker;
}

function load () {

	// Ottiene l'elemento della pagina chiamato "map" (il DIV) 
	//   e crea la mappa utilizzandolo come contenitore.
	map = new GMap2(document.getElementById("map"));
	
	// Aggiunge dei controlli per lo zoom e lo spostamento 
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	
	// Centra la mappa su Torino, con uno zoom di 17 
	map.setCenter(new GLatLng(45.068994,7.599363), 11,G_HYBRID_MAP);

	// Aggiunge il Marker Topix
	point=new GLatLng(45.068150,7.688050);
	icontype="home";
	marker = new GMarker(point, gicons[icontype]);   
	map.addOverlay(marker);
	description = "<img src=\"images/topix_logo.png\" alt=\"\" align=\"left\" style=\"margin-right:17px \"><br /><br /><br /><br /><b>Consorzio Top-IX</b><br><br>Via Bogino 9, 10123 Torino, Italia";
	map.addOverlay(createMarker( point, description, icontype));    

	// Aggiunge il Marker Rivoli
	point1=new GLatLng(45.069838,7.510677);
	icontype="conference";
	marker = new GMarker(point1, gicons[icontype]);   
	map.addOverlay(marker);
	description = "<img src=\"images/logo_conf.png\" alt=\"\" align=\"left\" style=\"margin-right:21px \"><br /><br /><br /><br /><br /><br /><b>Castello di Rivoli Museo Sala Teatro</b><br><br>Piazza Mafalda di Savoia, 10098 Rivoli (Torino), Italia";
	map.addOverlay(createMarker( point1, description, icontype)); 
	marker.openInfoWindowHtml(description); 
	      
	// Display a rectangle in the center of the map at about a quarter of
	// the size of the main map
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var lngDelta = (northEast.lng() - southWest.lng()) / 7;
	var latDelta = (northEast.lat() - southWest.lat()) / 3;
	var rectBounds = new GLatLngBounds(
	new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
	new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
	map.addOverlay(new Rectangle(rectBounds));


      // create the crosshair icon, which will indicate where we are on the minimap
      // Lets not bother with a shadow
      var Icon = new GIcon();
      Icon.image = "images/mirino.png";
      Icon.iconSize = new GSize(21, 21);
      Icon.shadowSize = new GSize(0,0);
      Icon.iconAnchor = new GPoint(11, 11);
      Icon.infoWindowAnchor = new GPoint(11, 11);
      Icon.infoShadowAnchor = new GPoint(11, 11);

      // Create the minimap
      var minimap = new GMap2(document.getElementById("minimap"));
      minimap.setCenter(new GLatLng(45.068994,7.599363), 4);
      
      // Add the crosshair marker at the centre of teh minimap and keep a reference to it
      
      var xhair = new GMarker(minimap.getCenter(), Icon);            
      minimap.addOverlay(xhair);
      
      
      // ====== Handle the Map movements ======
      
      // Variables that log whether we are currently causing the maps to be moved
    
      var map_moving = 0;
      var minimap_moving = 0;
    
      // This function handles what happens when the main map moves
      // If we arent moving it (i.e. if the user is moving it) move the minimap to match
      // and reposition the crosshair back to the centre
      function Move(){
        minimap_moving = true;
	if (map_moving == false) {
	  minimap.setCenter(map.getCenter());
	  xhair.setPoint(map.getCenter());
	  xhair.redraw(true);
	}
	minimap_moving = false;
      }
      // This function handles what happens when the mini map moves
      // If we arent moving it (i.e. if the user is moving it) move the main map to match
      // and reposition the crosshair back to the centre
      function MMove(){
        map_moving = true;
	if (minimap_moving == false) {
	  map.setCenter(minimap.getCenter());
	  xhair.setPoint(minimap.getCenter());
	  xhair.redraw(true);
	}
	map_moving = false;
      }
      
      // Listen for when the user moves either map
      GEvent.addListener(map, 'move', Move);
      GEvent.addListener(minimap, 'moveend', MMove);

}
    }

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