L’intégration d’une carte interactive sur un site web immobilier permet aux utilisateurs de visualiser facilement les propriétés disponibles selon leur localisation. Grâce à Google Maps API, vous pouvez afficher les propriétés dynamiquement avec des marqueurs, des fenêtres d’informations, et des filtres interactifs.
Dans cet article, nous allons explorer comment :
- Obtenir une clé API Google Maps
- Afficher une carte Google Maps sur votre site web
- Ajouter des marqueurs pour les propriétés
- Personnaliser les informations des propriétés (prix, images, etc.)
- Filtrer les propriétés par critères (prix, type, ville, etc.)
1. Obtenir une Clé API Google Maps
Google Maps nécessite une clé API pour fonctionner. Voici comment l’obtenir :
Créer un compte Google Cloud :
- Rendez-vous sur Google Cloud Console.
- Créez un projet et activez Google Maps JavaScript API.
Générer une clé API :
- Accédez à Clés API dans Google Cloud.
- Restreignez l’accès à votre site web pour éviter tout usage abusif.
2. Ajouter Google Maps à votre Site Web
Dans le fichier HTML de votre projet, ajoutez ce script Google Maps en remplaçant YOUR_API_KEY par votre clé API :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte Interactive – Propriétés Immobilières</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h1>Carte Interactive des Propriétés</h1>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 45.5017, lng: -73.5673 }, // Coordonnées de Montréal
zoom: 12,
});
}
</script>
</body>
</html>
3. Ajouter des Marqueurs pour les Propriétés
Ajoutons des marqueurs dynamiques pour afficher les propriétés immobilières.
Ajoutez ce code dans le <script> de votre page :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 45.5017, lng: -73.5673 },
zoom: 12,
});
var properties = [
{
name: "Appartement Centre-Ville",
lat: 45.508,
lng: -73.554,
price: "450 000 $",
image: "https://via.placeholder.com/100"
},
{
name: "Maison à Laval",
lat: 45.6,
lng: -73.75,
price: "650 000 $",
image: "https://via.placeholder.com/100"
}
];
properties.forEach(function(property) {
var marker = new google.maps.Marker({
position: { lat: property.lat, lng: property.lng },
map: map,
title: property.name,
});
var infoWindow = new google.maps.InfoWindow({
content: `<div>
<h3>${property.name}</h3>
<img src="${property.image}" width="100">
<p>Prix : ${property.price}</p>
</div>`
});
marker.addListener("click", function() {
infoWindow.open(map, marker);
});
});
}
</script>
Explication :
- On définit un tableau d’objets
propertiescontenant les coordonnées, noms et prix des propriétés. - On boucle sur chaque propriété pour créer un marqueur.
- On ajoute un InfoWindow (bulle d’information) qui s’ouvre en cliquant sur un marqueur.
4. Filtrer les Propriétés Dynamiquement
Ajoutons un formulaire pour filtrer les propriétés par prix ou type.
Ajoutez ce code dans votre body avant <div id="map"></div> :
<select id="filter" onchange="filterProperties()">
<option value="all">Toutes les propriétés</option>
<option value="appartement">Appartements</option>
<option value="maison">Maisons</option>
</select>
Puis, mettez à jour le script pour inclure le filtre :
<script>
var properties = [
{
name: "Appartement Centre-Ville",
lat: 45.508,
lng: -73.554,
price: "450 000 $",
type: "appartement",
image: "https://via.placeholder.com/100"
},
{
name: "Maison à Laval",
lat: 45.6,
lng: -73.75,
price: "650 000 $",
type: "maison",
image: "https://via.placeholder.com/100"
}
];
var markers = [];
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 45.5017, lng: -73.5673 },
zoom: 12,
});
properties.forEach(function(property) {
var marker = new google.maps.Marker({
position: { lat: property.lat, lng: property.lng },
map: map,
title: property.name,
});
var infoWindow = new google.maps.InfoWindow({
content: `<div>
<h3>${property.name}</h3>
<img src="${property.image}" width="100">
<p>Prix : ${property.price}</p>
</div>`
});
marker.addListener("click", function() {
infoWindow.open(map, marker);
});
markers.push({ marker, type: property.type });
});
}
function filterProperties() {
var selectedType = document.getElementById("filter").value;
markers.forEach(function(obj) {
if (selectedType === "all" || obj.type === selectedType) {
obj.marker.setMap(map);
} else {
obj.marker.setMap(null);
}
});
}
</script>
Fonctionnalité ajoutée :
- Un menu déroulant permet de sélectionner Appartements ou Maisons.
- La fonction
filterProperties()affiche uniquement les propriétés du type sélectionné.
Conclusion
Grâce à Google Maps API, vous pouvez créer une carte interactive qui affiche les propriétés immobilières de manière intuitive et dynamique. Ce système peut être enrichi avec :
- Des filtres plus avancés (par prix, superficie, nombre de chambres, etc.).
- L’affichage des propriétés depuis une base de données ou WordPress.
- Un moteur de recherche interactif.
Vous souhaitez intégrer cette solution à votre site immobilier ? Contactez-nous pour une mise en place sur mesure ! 🚀
