La nuit de l'info

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
~~NOCACHE~~
<HTML>Dernière mise a jour: 26/10/2025 04:05:01<div id="map"></div>
<!-- <div id="cities" style="display:none;height:0px"> -->
<div id="cities" style="display:none">
    </div>
<div class="siteList">
        <nav class="indexCities"></nav>
        </div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCd3ukQSSi2ZE7aCXlMBwqXQ2xiUP9F3Ew&libraries=marker&loading=async"></script>


<script>
        window.addEventListener('load', function()
        {
            document.getElementById("map").style.height = "600px";

            var centerpos = new google.maps.LatLng(46.8, 2.418889);

            var optionsGmaps = {
                    center: centerpos,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoom: 6,
                    mapId: 'N2I_MAP'
            };

            window.map        = new google.maps.Map(document.getElementById("map"), optionsGmaps);
            window.infoWindow = null;
            window.geomarkers = new Array();
            window.geocoder   = new google.maps.Geocoder();
            window.queryState = 2;

            var francePosition  = new google.maps.LatLng(46.8, 2.418889);
            var tunisiePosition = new google.maps.LatLng(34.71, 10.76);
            var reunionPosition = new google.maps.LatLng(-21.099, 55.479);

            var franceControlDiv  = document.createElement('div');
            var tunisieControlDiv = document.createElement('div');
            var reunionControlDiv = document.createElement('div');

            new HomeControl(franceControlDiv,  'France',     francePosition, 6);
            new HomeControl(tunisieControlDiv, 'Tunisie',    tunisiePosition, 7);
            new HomeControl(reunionControlDiv, 'La Réunion', reunionPosition, 10);

            franceControlDiv.index  = 1;
            tunisieControlDiv.index = 1;
            reunionControlDiv.index = 1;

            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(franceControlDiv);
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(tunisieControlDiv);
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(reunionControlDiv);

            //nightMode();

            displayCities();
        });

        function setMode(feature, element, hueValue, lightnessValue)
        {
            var styles = [
                    {
                        featureType: feature,
                        elementType: element,
                        stylers: [
                            {hue: hueValue},
                            {lightness: lightnessValue}
                        ]
                    }
            ];
            window.map.setOptions({styles: styles});
        }

        function nightMode()
        {
                var styles = [
                        {
                                featureType: "all",
                                elementType: "labels.text.fill",
                                stylers: [
                                        {color: "#ffffff"}
                                ]
                        }, {
                                featureType: "all",
                                elementType: "labels.text.stroke",
                                stylers: [
                                        {color: "#3A3D3A"}
                                ]
                        }, {
                                featureType: "water",
                                elementType: "geometry",
                                stylers: [
                                        {color: "#3c7e8c"}
                                ]
                        }, {
                                featureType: "landscape",
                                elementType: "geometry",
                                stylers: [
                                        {color: "#11172A"}
                                ]
                        }, {
                                featureType: "poi",
                                elementType: "geometry",
                                stylers: [
                                        {color: "#11172A"}
                                ]
                        }, {
                                featureType: "administrative",
                                elementType: "geometry",
                                stylers: [
                                        {visibility: "off"}
                                ]
                        }, {
                                featureType: "administrative.country",
                                elementType: "geometry",
                                stylers: [
                                        {visibility: "on"}
                                ]
                        }, {
                                featureType: "administrative.country",
                                elementType: "labels",
                                stylers: [
                                        {visibility: "off"}
                                ]
                        }, {
                                featureType: "transit",
                                elementType: "all",
                                stylers: [
                                        {visibility: "off"}
                                ]
                        }, {
                                featureType: "road",
                                elementType: "geometry",
                                stylers: [
                                        {color: '#142D47'},
                                        {visibility: "simplified"}
                                ]
                        }, {
                                featureType: "road.local",
                                elementType: "geometry",
                                stylers: [
                                        {color: '#265976'},
                                        {visibility: "simplified"}
                                ]
                        }, {
                                featureType: "road",
                                elementType: "labels",
                                stylers: [
                                        {visibility: "off"}
                                ]
                        }
                ];

                window.map.setOptions({styles: styles});
        }

        function HomeControl(controlDiv, title, position, zoom)
        {
                controlDiv.style.padding = '6px 3px';

                var controlUI = document.createElement('div');
                controlUI.style.backgroundColor = 'white';
                controlUI.style.borderStyle     = 'solid';
                controlUI.style.borderWidth     = '1px';
                controlUI.style.borderColor     = 'rgba(0, 0, 0, 0.24)';
                controlUI.style.borderRadius    = '2px';
                controlUI.style.boxShadow       = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
                controlUI.style.cursor          = 'pointer';
                controlUI.style.textAlign       = 'center';
                if (typeof controlUI.style.webkitBoxShadow != "undefined")
                        controlUI.style.webkitBoxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
                if (typeof controlUI.style.mozBoxShadow != "undefined")
                        controlUI.style.mozBoxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
                controlUI.addEventListener("mouseover", function()
                {
                        controlUI.style.backgroundColor = '#c7c7c9';
                }, false);
                controlUI.addEventListener("mouseout", function()
                {
                        controlUI.style.backgroundColor = 'white';
                }, false);
                controlUI.title = 'Centrer la carte sur ' + title;
                controlDiv.appendChild(controlUI);

                var controlText = document.createElement('div');
                controlText.style.fontFamily   = 'font-family: Roboto, Arial, sans-serif;';
                controlText.style.color        = "rgb(86, 86, 86)";
                controlText.style.fontSize     = '11px';
                controlText.style.paddingLeft  = '4px';
                controlText.style.paddingRight = '4px';
                controlText.innerHTML          = '<b>' + title + '</b>';
                controlUI.appendChild(controlText);

                controlUI.addEventListener('click', function() {
                        window.map.setCenter(position);
                        window.map.setZoom(zoom);
                });
        }

        function killMarkers()
        {
                for (i = 0; i < window.geomarkers.length; i++)
                {
                        window.geomarkers[i].setMap(null);
                }
                window.geomarkers = new Array();
        }

        function addMarker(latlng, titleContent, htmlContent)
        {
                //var marker = new google.maps.Marker({
                var marker = new google.maps.marker.AdvancedMarkerElement({
                        position: latlng,
                        map: window.map,
                        title: titleContent,
                        gmpClickable: true,
                });

                //marker.setClickable(true);
                marker.setMap(window.map);

                google.maps.event.addListener(marker, 'click', function()
                {
                        if (window.infoWindow)
                                window.infoWindow.close();
                        window.infoWindow = new google.maps.InfoWindow({
                                content: '<div class="infoWindow"><span style="text-align:center; display:block; font-weight: bold; font-size:1.2em;">' + titleContent + '</span>' + htmlContent + '</div>'
                        });
                        window.infoWindow.open(window.map, marker);
                });
                window.geomarkers.push(marker);
        }

        function displayCities()
        {
                var links = document.getElementById("cities").getElementsByClassName("mapData");
                for (var counter = 0; counter < links.length; counter++)
                {
                        var lt = links[counter].getAttribute("data-lat");
                        var lg = links[counter].getAttribute("data-lng");
                        var name = links[counter].getAttribute("data-name");
                        var htmlContent = links[counter].innerHTML;
                        addMarker(new google.maps.LatLng(lt, lg), name, htmlContent);
                }
        }
</script>
</HTML>