function initMap() { var bounds = new google.maps.LatLngBounds(); var map = new google.maps.Map(document.getElementById('artisans-map'), { styles: styleMap }); var icon = { url: "https://artisans.quelleenergie.fr/assets/icones/geolocalize-02-57f71366ba86f935cf6949b551c67cc17042750d0fc34a5d7af80ac028bfae86.svg", scaledSize: new google.maps.Size(40, 40) } var iconSelectionne = { url: "https://artisans.quelleenergie.fr/assets/icones/geolocalize-01-5fe26a2a4ce9fd6566cc27b4fabb592a37fa7722f3e3d73019830ede8c4dbd05.svg", scaledSize: new google.maps.Size(40, 40) } var markers = [[48.8865604, 2.403021, "europ-therm-sas-35479"], [43.3064753, 5.3672657, "88008272200047"], [45.6949482, 4.764745700000001, "franki-fondation-bf742b9c-b46c-434a-897d-bbc322ff7a3a"], [48.6709741, 2.3945748, "franki-fondation"], [50.3708253, 3.0401978, "franki-fondation-5c6c7431-adf2-43e4-bc4e-0a00e5c8bb52"], [43.421023, 5.3830736, "franki-fondation-65f1dd36-43fd-401a-bfbf-e4be2d2f9b0a"], [47.2513552, 5.9983598, "franki-fondation-64ac81e3-518b-4f4a-bd59-849cc6503be6"], [47.561824, 1.4509217, "dardeau"], [45.5331408, 5.7055586, "34336168900015"], [46.12952180000001, 3.4240653, "83923625400034"]]; var dernierMarkerSelectionne; var listeObjetMarkers = [] for( i = 0; i < markers.length; i++ ) { var position = new google.maps.LatLng(markers[i][0], markers[i][1]); bounds.extend(position); marker = new google.maps.Marker({ position: position, map: map, url: markers[i][2], icon: icon }); listeObjetMarkers.push(marker) google.maps.event.addListener(marker, 'click', function() { montreCardArtisan(this); }); } map.fitBounds(bounds) map.panToBounds(bounds) $('.artisans-container .artisan-item').hover(function(){ montrePositionArtisan($(this)); }); function deselectionneMarker() { if (dernierMarkerSelectionne != undefined) { dernierMarkerSelectionne.setIcon(icon); } } function selectionneMarker(element) { $('.artisan-item.selectionne').removeClass('selectionne') element.toggleClass('selectionne') } function montreCardArtisan(marker) { deselectionneMarker(); marker.setIcon(iconSelectionne); var element = $('#'+marker.url); $('html, body').animate({ scrollTop: element.offset().top }, 600 ); selectionneMarker(element); dernierMarkerSelectionne = marker } function montrePositionArtisan(element) { selectionneMarker(element) var index = element.attr('id') for( i = 0; i < markers.length; i++ ) { if (listeObjetMarkers[i].url == index) { deselectionneMarker(); listeObjetMarkers[i].setIcon(iconSelectionne); dernierMarkerSelectionne = listeObjetMarkers[i] } }; } } $(document).on('turbolinks:load', function () { initMap(); });