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.0080395, 4.3209179, "gauthier-sarl-28462"], [47.616243, 4.916437, "sdel-bourgogne-bac33be8-d9b8-4bf1-8c62-c56a584e2680"], [47.353554, 5.0249845, "41473065500043"], [47.64099359999999, 6.1716078, "damour-patrick-17945"], [42.5315281, 2.8328622, "datella-yann-philippe-b5fe7ee4-a2b6-47f7-88ba-f4a794732cfd"], [48.8896947, 2.1590706, "home-garde-protection-2e1cdb0b-667a-4771-8019-c058a3f7ead5"], [48.997548, 1.149977, "proxiserve-a3b1ed97-ad42-45ff-8a2d-aebf9118f368"], [43.5299565, 1.4062206, "proxiserve-b8859ee6-cc7e-488e-9eb9-eba7e1b70719"], [48.43020869999999, 0.1007466, "proxiserve-15f07ba9-be2c-4498-9bff-b2c30efaf9e2"], [43.228298, 0.042608, "proxiserve-f081b44f-571e-4b59-ac55-7c10f937189f"]]; 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(); });