// *
// * Add multiple markers
// * 2013 - en.marnoto.com
// *

// necessary variables
var map;
var infoWindow;

 var image = {
    url: 'http://www.lindseystirling.fr/marker_map.png?3',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(64, 64),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(32, 64)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 64, 64, 64, 64, 1],
    type: 'poly'
  };

// markersData variable stores the information necessary to each marker
var markersData = [
  {
	lat:45.7307543,
      lng: 4.8254321,
      name: "Duality Tour",
      address1:"Lyon - Halle Tony Garnier",
      dateevent: "26/10/2024",
      lienevent: "http://lsfo.fr/fb-lyon" 
   },
	{
	lat:48.8942046,
      lng: 2.3906482,
      name: "Duality Tour",
      address1:"Paris - Zénith de Paris",
      dateevent: "25/10/2024",
      lienevent: "http://lsfo.fr/fb-paris" 
   },
	{
	lat:47.2287210,
      lng: -1.6305082,
      name: "Duality Tour",
      address1:"Nantes - Zénith de Nantes",
      dateevent: "24/10/2024",
      lienevent: "http://lsfo.fr/fb-nantes" 
   },
	{
	lat:48.5930649,
      lng: 7.6871185,
      name: "Duality Tour",
      address1:"Strasbourg - Zéntih de Strasbourg",
      dateevent: "29/10/2024",
      lienevent: "http://lsfo.fr/fb-strasbourg" 
   },
	{
	lat:47.3957445,
      lng: 8.5954384,
      name: "Duality Tour",
      address1:"Zurich - Samsung Hall",
      dateevent: "21/10/2024",
      lienevent: "http://lsfo.fr/fb-zurich" 
   },
	{
	lat:49.4999373,
      lng: 5.9476928,
      name: "Duality Tour",
      address1:"Luxembourg - Rockhal",
      dateevent: "08/10/2024",
      lienevent: "http://lsfo.fr/fb-luxembourg" 
   },
	{
	lat:50.8490556,
      lng: 4.3631182,
      name: "Duality Tour",
      address1:"Bruxelles - Cirque Royal",
      dateevent: "17/10/2024",
      lienevent: "http://lsfo.fr/fb-bruxelles" 
   }];


function initialize() {
	var styles = [
  {
    "featureType": "administrative.land_parcel",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#000000"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape",
    "stylers": [
      {
        "color": "#67ae9c"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "stylers": [
      {
        "color": "#469185"
      }
    ]
  },
  {
    "featureType": "landscape.natural.terrain",
    "stylers": [
      {
        "color": "#67ae9c"
      }
    ]
  },
  {
    "featureType": "road",
    "stylers": [
      {
        "visibility": "simplified"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#834550"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "stylers": [
      {
        "color": "#ccdbfd"
      }
    ]
  }
];
	
	
	var styledMap = new google.maps.StyledMapType(styles,
    {name: "Concerts de Lindsey Stirling"});
	
   var mapOptions = {
      center: new google.maps.LatLng(46.826266,2.7733327),
      zoom: 5,
	   mapTypeControlOptions: {
      mapTypeIds: ['map_style']
    }
   };
  
//mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  
   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   
     map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
   

   // a new Info Window is created
   infoWindow = new google.maps.InfoWindow();

   // Event that closes the Info Window with a click on the map
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });

   // Finally displayMarkers() function is called to begin the markers creation
   displayMarkers();
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
google.maps.event.addListener(infowindow, 'domready', function() {

    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    /* Since this div is in a position prior to .gm-div style-iw.
     * We use jQuery and create a iwBackground variable,
     * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css({'display' : 'none'});

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css({left: '115px'});

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Moves the arrow 76px to the left margin.
    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($('.iw-content').height() < 140){
      $('.iw-bottom-gradient').css({display: 'none'});
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: '1'});
    });
  });
   
   
   
   
   
   
   
   
   
   
   
}
google.maps.event.addDomListener(window, 'load', initialize);


// This function will iterate over markersData array
// creating markers with createMarker function
function displayMarkers(){

   // this variable sets the map bounds according to markers position
   var bounds = new google.maps.LatLngBounds();
   
    
   
   
   // for loop traverses markersData array calling createMarker function for each marker 
   for (var i = 0; i < markersData.length; i++){

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var dateevent = markersData[i].dateevent;
      var lienevent = markersData[i].lienevent;

      createMarker(latlng, name, address1, dateevent, lienevent);

      // marker position is added to bounds variable
      bounds.extend(latlng);  
   }

   // Finally the bounds variable is used to set the map bounds
   // with fitBounds() function
   
   //desactive pour ne pas recalcul zoom carte
   
   //map.fitBounds(bounds);
}

// This function creates each marker and it sets their Info Window content
function createMarker(latlng, name, address1, dateevent, lienevent){
   var marker = new google.maps.Marker({
      map: map,
	  icon: image,
      shape: shape,
      position: latlng,
      title: name
   });

   // This event expects a click on a marker
   // When this event is fired the Info Window content is created
   // and the Info Window is opened.
   google.maps.event.addListener(marker, 'click', function() {
      
      // Creating the content to be inserted in the infowindow
      var iwContent = '<div id="iw-container">' +
                    '<div class="iw-title">LINDSEY STIRLING</div>' +
                    '<div class="iw-content"><img src="http://www.lindseystirling.fr/img/mini.jpg"  height="200" width="200"/>' +
					'<p>' + dateevent + '<br />' +
                      '' + name + '<br />' +
						 address1 + '<br /><br />' +
						 '<a href="' + lienevent + '" target="_blank">Plus d\'infos</a></p>'+
                    '</div>' +
                  '</div>';
	  
	
      
      // including content to the Info Window.
      infoWindow.setContent(iwContent);

      // opening the Info Window in the current map and at the current marker location.
      infoWindow.open(map, marker);
   });
};



google.maps.event.addDomListener(window, 'load', initialize);