.meta-data { display: none; } |
<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:700px; 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> |