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 = [[47.308972, 5.049837, "engie-ad8d784b-54b9-4af9-8c89-dd8c60b582de"], [43.2789207, 5.3906319, "engie-8db524c7-a06a-43cb-a0a8-d34face5d150"], [44.8589891, -0.5898547, "engie-61a75837-ee82-424e-9983-545045ff1a83"], [45.153658, 1.464531, "engie-f2da185d-6a46-49ad-8df9-7c39bb19bee3"], [48.4102329, 2.7271326, "engie-db61691a-bb93-4778-bc5e-b87e7e6a776e"], [46.5864696, 0.364671, "engie-a7c26c72-3e7c-4ca4-a190-0bc643ad6289"], [49.6338027, -1.6262664, "engie-a1a04a15-ca6f-469a-80dc-13cb5775d276"], [48.9025943, 2.2948041, "engie-add1c987-d254-4b83-a670-ddc2baec4409"], [48.895442, 2.239383, "engie-766ac91f-a3f5-4011-9d3a-35dbec9afc6c"], [49.421917, 2.8211288, "engie-403741ea-dba7-4825-a744-37d4c727aa88"]]; 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(); });