(function() {

  // Defining variables that need to be available to some functions
  var map, infoWindow;

  window.onload = function() {

    // Creating a map
    var options = {  
      zoom: 3,
      center: new google.maps.LatLng(43.03, -87.91),
      mapTypeId: google.maps.MapTypeId.ROADMAP  
    };  
    
    map = new google.maps.Map(document.getElementById('map'), options);

    // Adding a marker
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(43.03, -87.91),
      map: map,
      title: 'Click me'
    });

    google.maps.event.addListener(marker, 'click', function() {
		
		//create div that will be containing all of the content of the map and assign the options
		var detailDiv = document.createElement('div');
		detailDiv.style.width = '200px';
		detailDiv.style.height = '200px';
		document.getElementById('map').appendChild(detailDiv);
		
		//create the MapOptions for the overview Map
		var overviewOptions = {
			zoom:14,
			center:marker.getPosition(),
			mapTypeId:map.getMapTypeId(),
			disableDefaultUI:true
		};
		
		var detailMap = new google.maps.Map(detailDiv, overviewOptions);
		
		//create the marker that will show in the detail map in the infoWindow
		var detailMarker = new google.maps.Marker({
			position:marker.getPosition(),
			map:detailMap,
			clickable:false
		});
			    
      // Check to see if an InfoWindow already exists
      if (!infoWindow) {
        infoWindow = new google.maps.InfoWindow();
      }
	  
	  //setting the content of the InfoWindow to the detail map
	  infoWindow.setContent(detailDiv);
	  
	  //opening the infoWindow
	  infoWindow.open(map, marker);
	
	});
  }
})();