jQuery(function ($) {
// Controle du touch pour ipad
var ua = navigator.userAgent,
eventClick = (ua.match(/iPad/i)) ? "touchstart" : "click";
eventMouseOver = (ua.match(/iPad/i)) ? "touchstart" : "mouseover";
// Variable definition for MouseOver Statement, change the 'anchor' coordonates if you change those images listed below.
var imgImplantationsHover = 'puce-implantation-hover.png';
var imgRondsHover = 'puce-realisation-over.png';
//
// ################################################################# TEXT FOR DEMO //
var text29 = "<h3>Bouin</h3>";
text29 += "<div class='mapcontent'><img src='eoliennes.jpg' class='alignLeft'/><b>Vendée : 19,5MW</b><br />Mise en service depuis 2003 dont 7,5 MW cédés (DVAS).</div>";
var text47 = "<h3>Chemin d\'Ablis</h3>";
text47 += "<div class='mapcontent'><strong>Eure-et-Loir : 52,0 MW</strong><br />Mise en service en 2008<br />O&M : oui</div>";
var text48 = "<h3>Les Barthes</h3>";
text48 += "<div class='mapcontent'><strong>Haute-Loire : 16,0 MW</strong><br />Mise en service en 2009<br />O&M : oui</div>";
var text49 = "<h3>Freyssenet</h3>";
text49 += "<div class='mapcontent'><strong>Ardèche : 10,0 MW</strong><br />Mise en service en 2007, centrale cédée (DVAS)<br />O&M : oui</div>";
function initCarte(){
var tMarker, tMarkerLng, oMarker, oMapOptions, oMap, myInfoBox, myInfoBoxOptions, i;
// ################################################################# Markers Contents Table //
var tMarker = [
{ 'lat' :46.57773, 'lon' : 2.23477, 'title' :'Bouin', 'info' :text29, 'picto':'puce-bleue3.png', 'isImplantation':'flase','type':'blue'},
{ 'lat' :48.14582, 'lon' : 1.461764, 'title' :'Chemin d\'Ablis', 'info' :text47, 'picto':'puce-bleue3.png', 'isImplantation':'flase','type':'orange'},
{ 'lat' :44.563701, 'lon' : 4.41085, 'title' :'Les Barthes', 'info' :text48, 'picto':'puce-bleue3.png', 'isImplantation':'flase','type':'gris'},
{ 'lat' :44.683301, 'lon' : 4.540787, 'title' :'Freyssenet', 'info' :text49, 'picto':'puce-bleue3.png', 'isImplantation':'tru','type':'blue'},
];
tMarkerLng = tMarker.length;
// ################################################################# Arguments for the map & create map //
mapOptions = {
'zIndexBulle' : 1,
'zoom' : 5,
'center' : new google.maps.LatLng( 46.80, 1.75),
'mapTypeId' : google.maps.MapTypeId.TERRAIN,
'styles' : [ { "featureType": "administrative.country", "stylers": [ { "lightness": 60 }, { "visibility": "off" } ] }, { "featureType": "road", "stylers": [ { "visibility": "on" }, { "saturation": -36 }, { "lightness": 47 } ] },{ "featureType": "poi" },{ "featureType": "administrative.locality", "stylers": [ { "lightness": 52 }, { "visibility": "on" } ] },{ "featureType": "administrative.province", "stylers": [ { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "simplified" } ] },{ "featureType": "transit", "stylers": [ { "visibility": "off" } ] },{ "elementType": "geometry.stroke", "stylers": [ { "visibility": "off" } ] },{ } ]
}
mapOptions = $.extend({
scrollwheel: false,
streetViewControl:false,
mapTypeControl: false,
scaleControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}, mapOptions);
oMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// ################################################################# InfoBox, 'js/infobox.js' needed//
myInfoBoxOptions = {
content: "",
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(25, -10),
zIndex: null,
boxClass: "infoBoxNlg",
closeBoxURL: "close.png",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
myInfoBox = new InfoBox(myInfoBoxOptions);
// ################################################################# Create Markers From "tMarker" Table
for( i = 0; i < tMarkerLng; i++){
var imageMarker;
if(tMarker[i].isImplantation == "true"){
imageMarker = {
url: tMarker[i].picto,
anchor: new google.maps.Point(8, 25)
};
} else {
imageMarker = {
url: tMarker[i].picto,
anchor: new google.maps.Point(0, 0)
};
}
oMarker = new google.maps.Marker({
'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
'map' : oMap,
//'title' : tMarker[i].title,
'icon' : imageMarker,
'zIndex': i,
'number' : i,
'animation': google.maps.Animation.DROP,
});
// ################################################################# MOUSE OVER / MOUSE OUT statements
google.maps.event.addListener( oMarker, 'mouseover', function(){
// set selected marker above all others
this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
// set marker image for "over" behavior
var imageMarkerOver;
if(tMarker[this.number].isImplantation == "true"){
imageMarkerOver = {
url: imgImplantationsHover,
anchor: new google.maps.Point(8, 25)
};
} else {
imageMarkerOver = {
url: imgRondsHover,
anchor: new google.maps.Point(0, 0)
};
}
// Refresh Icon with the new url & anchor
this.setIcon(imageMarkerOver);
// Refresh infoBox content
myInfoBox.setContent("<div class='fond'></div><div class='contentInfoBox'>" + tMarker[this.number].info + "</div>");
// Open infoBox
myInfoBox.open(oMap, this);
});
google.maps.event.addListener( oMarker, 'mouseout', function(){
//IF you want the infoxBox closes on MouseOver, uncomment the line below
// myInfoBox.close(oMap, this);
// Switch marker image for "over" behavior
var imageMarkerOut;
if(tMarker[this.number].isImplantation == "true"){
imageMarkerOut = {
url: tMarker[this.number].picto,
anchor: new google.maps.Point(8, 25)
};
} else {
imageMarkerOut = {
url: tMarker[this.number].picto,
anchor: new google.maps.Point(0, 0)
};
}
// Refresh Icon with the new url & anchor
this.setIcon(imageMarkerOut);
});
oMarker.locid = i+1;
if(oMarker.length == tMarker.length) doFilter();
}
//var markers = [];
var locIndex;
var tMarker = [];
function doFilter() {
if(!locIndex) {
locIndex = {};
//I reverse index markers to figure out the position of loc to marker index
for(var x=0, len=oMarker.length; x<len; x++) {
locIndex[oMarker[x].locid] = x;
}
}
//what's checked?
var checked = $("input[type=checkbox]:checked");
var selTypes = [];
for(var i=0, len=checked.length; i<len; i++) {
selTypes.push($(checked[i]).val());
}
for(var i=0, len=tMarker.length; i<len; i++) {
//var sideDom = "p.loc[tMarker-locid="+(i+1)+"]";
//Only hide if length != 0
if(checked.length !=0 && selTypes.indexOf(tMarker[i].type) < 0) {
//$(sideDom).hide();
this.set_map(null);
this.tMarker[locIndex[i+1]].setvisible(false);
} else {
//$(sideDom).show();
this.tMarker[locIndex[i+1]].setvisible(true);
}
}
}$(document).on("click", "input[type=checkbox]", doFilter);
}
google.maps.event.addDomListener( window, 'load', initCarte);
});