Comment transformer WordPress en intranet ? Deux approches différentes
Nous vous proposons deux approches très simples pour transformer WordPress en intranet.…
Embedding an interactive map on a real estate website allows users to easily view available properties based on their location. Using the Google Maps API , you can dynamically display properties with markers, information windows, and interactive filters.
In this article, we will explore how to:
- Get a Google Maps API key
- Display a Google Map on your website
- Add markers for properties
- Customize property information (price, images, etc.)
- Filter properties by criteria (price, type, city, etc.)
1. Get a Google Maps API Key
Google Maps requires an API key to work. Here’s how to get it:
-
Create a Google Cloud account :
- Go to Google Cloud Console .
- Create a project and enable Google Maps JavaScript API .
-
Generate an API key :
- Access API Keys in Google Cloud.
- Restrict access to your website to prevent misuse.
2. Add Google Maps to your Website
In your project’s HTML file, add this Google Maps script, replacing YOUR_API_KEY with your API key:
<!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. Add Markers for Properties
Let’s add dynamic markers to display real estate properties.
Add this code in the <script> of your 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>
Explanation :
- We define an array of
propertiesobjects containing the coordinates, names and prices of the properties. - We loop through each property to create a marker .
- We add an InfoWindow (information bubble) which opens by clicking on a marker.
4. Filter Properties Dynamically
Let’s add a form to filter properties by price or type.
Add this code in your body before <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>
Then, update the script to include the filter:
<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>
Added feature :
- A drop-down menu allows you to select Apartments or Houses .
- The
filterProperties()function displays only the properties of the selected type.
Conclusion
With Google Maps API , you can create an interactive map that displays real estate properties in an intuitive and dynamic way. This system can be enriched with:
- More advanced filters (by price, size, number of rooms, etc.).
- Displaying properties from a database or WordPress.
- An interactive search engine.
Would you like to integrate this solution into your real estate website? Contact us for a customized implementation! 🚀
Comment créer votre boutique en ligne avec WooCommerce
Vous voulez vous lancer dans la vente en ligne? Woocomerce serait l’outil…
Fin de vie de Joomla 3.10.12 — ce que cela signifie pour votre entreprise
Embedding an interactive map on a real estate website allows users to…
Comment protéger le formulaire de commentaire WordPress contre les pourriels avec Google reCAPTCHA V3
Comment protéger le formulaire de commentaire WordPress contre les pourriels avec Google…
Comment intégrer le module de paiement Moneris sur son site web E-commerce
Si vous êtes au Canada ou aux USA, vous pouvez opter pour…
Gilblas is a senior entrepreneur and developer with around 13 years of experience, deeply involved in the WordPress community. He helps SMEs grow through custom web solutions and training. He stands out for his ability to automate and industrialize website creation through Phoenix Forge.