Only the first 100 properties in your search appear on the map.
Adjust your search to see all.
`
}, {
lat: 50.725046,
lng: 4.514158,
popupContent: `
Multi-unit
`
}, {
lat: 50.65316,
lng: 4.56377,
popupContent: `
Multi-unit
`
}, ];
// Les options de la carte
const mapOptions = {
zoom: 12,
center: markerCoordinates[0],
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
fullscreenControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
};
// Création de la carte
const map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
// L'icône personnalisée
const image = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzg0IDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzg0IDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggc3R5bGU9ImZpbGw6I0REMDkzNSIgZD0iTTIxNS43LDQ5OS4yQzI2Nyw0MzUsMzg0LDI3OS40LDM4NCwxOTJDMzg0LDg2LDI5OCwwLDE5MiwwUzAsODYsMCwxOTJjMCw4Ny40LDExNywyNDMsMTY4LjMsMzA3LjINCglDMTgwLjYsNTE0LjUsMjAzLjQsNTE0LjUsMjE1LjcsNDk5LjJMMjE1LjcsNDk5LjJ6IE0xOTIsMTI4YzM1LjMsMCw2NCwyOC43LDY0LDY0cy0yOC43LDY0LTY0LDY0cy02NC0yOC43LTY0LTY0UzE1Ni43LDEyOCwxOTIsMTI4DQoJeiIvPg0KPC9zdmc+DQo=";
// La taille de l'icône
const iconSize = new google.maps.Size(40, 40);
// Création d'un infowindow
const infowindow = new google.maps.InfoWindow();
const bounds = new google.maps.LatLngBounds();
// Création d'un tableau pour stocker vos marqueurs
var markers = [];
// Parcourir les coordonnées des marqueurs et créer un marqueur pour chaque coordonnée
markerCoordinates.forEach((markerData) => {
const position = new google.maps.LatLng(markerData.lat, markerData.lng);
const marker = new google.maps.Marker({
position: markerData,
map: map,
icon: {
url: image,
scaledSize: iconSize
}
});
// Ajouter un événement 'click' au marqueur pour afficher l'infowindow avec le contenu spécifique
marker.addListener("click", () => {
infowindow.setContent(markerData.popupContent);
infowindow.open(map, marker);
});
bounds.extend(position);
// Ajouter le marqueur au tableau de marqueurs
markers.push(marker);
});
const clusterStyles = [{
textColor: 'white',
textSize: 14,
url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJDYWxxdWVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzAgMzAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZGQwODM1O308L3N0eWxlPjwvZGVmcz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE1IiBjeT0iMTUiIHI9IjE1Ii8+PC9zdmc+',
height: 50,
width: 50
}];
// Créer un objet MarkerClusterer et lui donner le tableau de marqueurs
const mcOptions = {
gridSize: 50,
maxZoom: 15,
styles: clusterStyles
};
const markerCluster = new MarkerClusterer(map, markers, mcOptions);
map.fitBounds(bounds);
}
window.initMap = initMap;
