https://mdjs.ma/wp-content/themes/mdjs/assets/js/detaillants.js?v=1791390885&ver=20151215

1$ = jQuery;
2
3$(function () {
4    if ($("#liste_agencies li a").length > 0)
5        myMap();
6});
7
8
9gmarkers1 = [];
10markers = [];
11infowindow = [];
12
13var markerCluster;
14var lat, lan, id, ville, center, marker;
15
16if(typeof(cluster_icon) != "undefined")
17    var mcOptions = {
18        styles: [{
19            url: cluster_icon,
20            width: 53,
21            height: 53,
22            textSize: 15,
23            textColor: "#ffffff"
24        }]
25
26    };
27
28function myMap() {
29    maposition = null;
30    navigator.geolocation.getCurrentPosition(
31        function (position) {
32            maposition = position;
33        },
34        function () {
35            // console.log('error');
36        }
37    );
38
39    var lat = $("#liste_agencies li a").first().data("lat");
40    var lan = $("#liste_agencies li a").first().data("lan");
41
42    var center = new google.maps.LatLng(33.550991, -7.568234);
43    var mapCanvas = document.getElementById("map");
44    var mapOptions = {
45        center: center,
46        zoom: 9
47    };
48
49    map = new google.maps.Map(mapCanvas, mapOptions);
50    var mapStyles = [{
51        featureType: "administrative.country",
52        stylers: [{
53            visibility: "off"
54        }]
55    }];
56    var mapType = new google.maps.StyledMapType(mapStyles, {
57        name: "Maroc"
58    });
59    map.mapTypes.set('maroc', mapType);
60    map.setMapTypeId('maroc');
61    layer = new google.maps.FusionTablesLayer({
62        query: {
63            select: 'geometry',
64            from: '1S4aLkBE5u_WS0WMVSchhBgMLdAARuPEjyW4rs20',
65            where: "col1 contains 'MAR'"
66        },
67        styles: [{
68            polylineOptions: {
69                strokeColor: "#333333",
70                strokeWeight: 2
71            },
72        }],
73        suppressInfoWindows: true,
74    });
75    layer.setMap(map);
76
77    
78
79    var infowindow = new google.maps.InfoWindow({});
80
81    $("#liste_agencies li a").each(function () {
82        $this = $(this);
83        lat = $(this).data("lat");
84        lan = $(this).data("lan");
85        id = $(this).attr("id");
86        $this.attr("href", $(this).data("link"));
87        ville = $this.data("ville");
88
89        center = new google.maps.LatLng(lat, lan);
90
91        marker = new google.maps.Marker({
92            ville: ville,
93            position: center,
94            icon: marker_icon,
95            id: id
96        });
97
98        marker.setMap(map);
99
100        markers[$(this).attr("id")] = marker;
101        gmarkers1.push(marker);        
102
103        google.maps.event.addListener(marker, 'click', function () {
104
105            html = "<div class='marker_title'>" + $this.data("title") + "</div>";
106            html += "<div class='marker_address'>" + $this.data("address") + "</div>";
107            html += "<a class='marker_url' href='https://maps.google.com/?q=" + $this.data("lat") + "," + $this.data("lan") + "' target='_BLANK'><i class='fa fa-map-marker' aria-hidden='true'></i> Ouvrir le lien sur Google maps";
108
109            infowindow.setContent(html);
110            infowindow.open(map, this);
111        });
112
113    });
114
115    markerCluster = new MarkerClusterer(map, gmarkers1, mcOptions);
116    
117    $("#liste_agencies li a").mouseenter(function () {
118        getLocation($(this));
119    }).click(function (e) {
120        e.preventDefault();
121    });
122}
123

124$("#region").change(function(){
125    var name = $(this).val();
126    var str = "";
127    $.each(regions, function(key, region){
128        if(region.name == name)
129        {
130            $.each(region.villes, function(k, ville){
131                str += '<option value="'+ville+'">'+ville+'</option>';
132            });
133        }
134    });
135
136    $("#city").html(str);
137    setTimeout(function(){
138        $("#city").change();
139    }, 100);
140});
141
142$("#region").change();
143
144$('#city').change(function () {
145    filterMarkers($(this).val());
146});
147
148/**
149 * Function to filter markers by city
150 */
151var liste_agences;
152var markersF = 0;
153function filterMarkers(ville) {
154    
155    let new_markers = [];
156
157    liste_agences = $('#liste_agencies ul');
158    liste_agences.find('li').hide();
159    liste_agences.find("li[data-ville='" + ville + "']").show();
160
161
162    for (i = 0; i < liste_agences.find('li').length; i++) {
163        marker = gmarkers1[i];
164        // If is same ville or ville not picked
165        if (marker.ville == ville || ville.length === 0) {
166            markersF++;
167            marker.setVisible(true);
168
169            new_markers.push(marker);
170        }
171        // Cities don't match
172        else {
173            marker.setVisible(false);
174        }
175    }
176
177    if (markersF > 0) {
178        $('#liste_agencies ul li a[data-ville="' + ville + '"]').first().trigger('mouseenter');
179    }
180
181    markerCluster.clearMarkers();
182
183    markerCluster = new MarkerClusterer(map, new_markers, mcOptions);
184}
185
186function getLocation(element) {
187    var distance = 0;
188    showWindow(element, distance);
189}
190
191function showWindow(element, distance) {
192    var str = "<div class='marker_title'>" + element.data("title") + "</div>";
193    str += "<div class='marker_address'>" + element.data("address") + "</div>";
194    str += "<a class='marker_url' href='https://maps.google.com/?q=" + element.data("lat") + "," + element.data("lan") + "' target='_BLANK'><i class='fa fa-map-marker' aria-hidden='true'></i> Ouvrir le lien sur Google maps";
195
196    if (!infowindow[element.attr("id")])
197        infowindow[element.attr("id")] = new google.maps.InfoWindow({
198            content: str
199        });
200
201    for (var win in infowindow) {
202        infowindow[String(win)].close();
203    }
204    
205    map.panTo(markers[element.attr("id")].getPosition());
206    infowindow[element.attr("id")].open(map, markers[element.attr("id")]);
207}
208
209$(document).ready(function () {
210    $("#liste_agencies").height($("#maps").outerHeight() - 132);
211});