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 = [[14.6070561, -61.00555959999999, "otis-6f8d854f-6acc-44f4-a01e-21f04d023ad7"], [47.8908888, 1.925239, "otis-4ff5431e-dd46-473f-b32a-3e3c47af66ff"], [47.43258460000001, 0.6943602999999999, "otis-9f773faf-91c9-427b-b9da-364f59d13556"], [48.8868917, 2.2129098, "otis-a1726da1-b3eb-46e4-b117-18cf41650a96"], [48.8655313, 2.4440265, "otis-b25b7c41-e174-4f0f-b6b9-f5cd60aa16c5"], [48.8127935, 2.3262658, "otis-5ba75229-f15e-445d-91d3-ec1275d2e880"], [49.899809, 2.354433, "otis-ce04f758-95d0-4e6a-bf69-cf9d4933d6af"], [48.8877923, 2.2441038, "otis-29248df9-e1b5-4069-9cec-b879ce3a8a1c"], [43.6828457, 7.202532700000001, "otis-3fc9f57e-902d-4a90-9e27-184911b64925"], [43.3269833, -0.3314743, "otis-5514a9e6-f98d-4828-8771-1c7d00a351e2"]]; 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(); });