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 = [[45.6356028, 0.1299126, "engie-43e5ef5f-e276-47a3-9302-1722d7695b2e"], [44.2007565, 0.6245248, "engie-51d46a70-62b1-44fd-b051-0461a97c1ab1"], [49.477701, 1.10392, "engie-c411edbd-31ac-4042-9377-250c425c2fd1"], [46.670511, -1.426442, "engie-0aa54de0-62c1-4839-8d16-c586441757d8"], [48.4551819, -2.0493308, "engie-c4eb7f4b-50b0-44c3-a2e7-3f9da0d49a36"], [48.0727851, 7.296465800000001, "engie-0b63a916-13dc-4a58-b59c-b8d0a10b4784"], [49.493125, 0.143116, "engie-a9f5d448-cfb2-475a-bf44-9c9a023c257d"], [46.198994, 5.2486313, "engie-1cbef761-de82-4188-b2d1-135933ff1fc7"], [43.1857835, 5.7735325, "engie-132c0ee0-6a06-489d-8aca-634ab5da2025"], [49.6518919, -1.6508838, "engie-e60420f6-cecc-4c26-a585-4380a27cd80b"]]; 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(); });