<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwdVxyGviowqeOGo59Fu_TL2A_mcnvspw&sensor=SET_TO_TRUE_OR_FALSE"> </script>

    <script type="text/javascript">
		//Available marker in different colors
		var blue = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/blue-dot.png');
        var green = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/green-dot.png');
        var lightblue = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/lightblue-dot.png');
        var orange = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/orange-dot.png');
        var pink = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/pink-dot.png');
        var purple = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/purple-dot.png');        
        var red = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/red-dot.png');         
        var activeIcon = new google.maps.MarkerImage('http://google.com/mapfiles/ms/micons/yellow-dot.png');



		/***********************************************************************************************/
    	/* START CUSTOM CONTENT                                                                        */
    	/***********************************************************************************************/
        
        //Map variables
        var start_center_lat = 45;
        var start_center_lon = 10;
        var start_zoomlevel  = 2;
		var mapTypeId        = google.maps.MapTypeId.HYBRID; //Values can be: ROADMAP, SATELLITE, HYBRID, TERRAIN 


		 //Content
        //Structure: [{title}, {latitude}, {longitude}, {z-index}, {link to wiki}, {markercolor}]
		//Values for markercolor: blue, green, lightblue, orange, pink, purple, red
		 var sites = [
            
			['River Ice', 47.0, 15.0, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=29687863', red],
            ['3D Geological Maps', 47.2, 15.4, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=29687866', purple],
            ['Coastal Habitat', 27, -89, 1, 'https://earsc-portal.eu/plugins/viewsource/viewpagesrc.action?pageId=29687945', green]

		 ];



		/***********************************************************************************************/
    	/* END CUSTOM CONTENT                                                                           */    
    	/***********************************************************************************************/    

        
        
        //Global variables        
        var gmarkers = [];
        var infowindow = null;
		
		// Shapes define the clickable region of the icon.
        var shape = {
            coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
            type: 'poly'
        }; 		
		

		function initialize() {
			//Common parameters
			var myLatlng, marker;
			//Map parameters
			var mapOptions = {
          		center: new google.maps.LatLng(start_center_lat, start_center_lon),
          		zoom: start_zoomlevel,
          		scaleControl: true,
          		mapTypeId: mapTypeId        
       		 };

        	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);	
			setMarkers(map);
		}

		function setMarkers(map) {
        	for (var i = 0; i < sites.length; i++) {
            	var siteLatLng = new google.maps.LatLng(sites[i][1], sites[i][2]);
            	var marker = new google.maps.Marker({
                	position: siteLatLng,
               	 	map:         map,
                	title:      sites[i][0],
                	zIndex:     sites[i][3],
                	link2wiki:  sites[i][4],
                	icon:       sites[i][5],
               		shape: shape
           	 	});
            
            	google.maps.event.addListener(marker, "click", function () {
                	for (var i=0; i < sites.length; i++) {
                   		gmarkers[i].setIcon(sites[i][5]);
                	}
                	this.setIcon(activeIcon);
                	markerClicked(this.link2wiki);
            	});
            
            google.maps.event.addListener(marker, "mouseover", function () {               
                for (var i=0; i < sites.length; i++) {
                   gmarkers[i].setIcon(sites[i][5]);
                }
                this.setIcon(activeIcon);
            });
            
            	google.maps.event.addListener(marker, "mouseout", function () {               
               		for (var i=0; i < sites.length; i++) {
                  		gmarkers[i].setIcon(sites[i][5]);
                	} 
					this.setIcon(activeIcon);               
           		});
            
            	gmarkers.push(marker);
        	}
    	}


  		function markerClicked( link2wiki ) {
			document.getElementById("map_content").innerHTML  = '<object type="text/html" style="width:100%; height:100%;" data=" ' + link2wiki + '" ></object>';
		}
	
	</script>
    
	<div id="container"> 
		<div id="header"  style="width:100%; height:10%; text-align:center;">
			<h1>EO4OG Case Studies</h1>
			<p>Click on a marker to get additional information from the Wiki</p>
		</div>
		<div id="map_canvas" style="width:800px; height:400px"></div> <!-- Has to be defined in pixel to be shown in Confluence -->
		<div id="map_content" style="width:100%; height:600px; background:white;"></div>
	</div>

	<script type="text/javascript">
		initialize();
	</script>