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.6127943, 6.1835172, "engie-edf39e6c-0637-48ef-989c-6101b825c597"], [47.23747179999999, 5.98774, "engie-b49a55d8-8577-407e-8f6c-26e419c58c90"], [47.2087285, -1.5778529, "engie-b95000e3-f7d6-4306-8f48-ef5a77773e46"], [48.6374795, 4.954165199999999, "engie-cd3ec429-8e0d-4bc7-9689-44141d1df68e"], [45.9886015, 4.7218858, "engie-69c056f8-663f-4ad4-92e1-e6e0aad5c64d"], [48.87771129999999, 2.3208227, "engie-0ecd5dae-4be3-4a7f-911e-542bb093e273"], [43.5726028, 1.3886776, "engie-75eb7b67-74e2-4b1d-85c6-13abc9ab4a72"], [47.305552, -2.070538, "engie-8f1345c3-724f-45f2-846e-c282b4b21c96"], [47.5999946, 1.3417949, "engie-a1f7f746-130b-406a-b9dd-7aff6185c640"], [42.68040269999999, 2.8942719, "engie-a2929a1e-e57e-41e9-9629-b70f82cd281b"]]; 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(); });