Localisation & Cartographie

NGZ Ads intègre un système complet de géolocalisation : saisie de l'adresse lors du dépôt d'une annonce, recherche par ville, filtre dans la barre latérale et vue carte sur la page des annonces.

Fournisseur de carte

Deux fournisseurs sont disponibles, configurables depuis Administration → Paramètres → Map Provider.

Le choix du fournisseur est global : il s'applique au sélecteur d'adresse lors du dépôt d'une annonce, à l'édition du profil utilisateur et à la vue carte des annonces.

Configurer OpenStreetMap

Aucune action requise. OpenStreetMap est actif par défaut. La géocodification utilise l'API publique Nominatim et les tuiles sont servies par les serveurs OpenStreetMap.

Nominatim est soumis à une politique d'utilisation acceptable. Pour un usage intensif (> 1 requête/s), envisagez un serveur Nominatim auto-hébergé ou un service tiers compatible.

Configurer Google Maps

1. Créer une clé API Google Maps

1. Connectez-vous à la Google Cloud Console.
2. Créez un projet (ou sélectionnez-en un existant).
3. Accédez à API et services → Bibliothèque et activez :
4. Accédez à API et services → Identifiants et créez une clé API.
5. Dans les Restrictions de la clé, limitez-la à votre domaine (ex : https://monsite.com/*) pour éviter tout usage non autorisé.

2. Saisir la clé dans les paramètres

Dans Administration → Paramètres → Map Provider :

1. Sélectionnez Google Maps.
2. Le champ Clé API Google Maps apparaît.
3. Collez votre clé (format AIza...).
4. Cliquez sur Enregistrer.

La clé est stockée dans config/settings.php et injectée côté client. Ne partagez jamais ce fichier publiquement.

Saisie de la localisation lors du dépôt d'une annonce

Lors du dépôt ou de l'édition d'une annonce, le champ Localisation offre :

• Autocomplete : saisissez au moins 3 caractères pour voir les suggestions de villes. Les résultats proviennent de Nominatim (OpenStreetMap) ou de l'API Places (Google Maps).
• Carte interactive : cliquez sur la carte pour placer le marqueur ; un marqueur est glissable pour affiner la position.
• Géolocalisation : le bouton 🎯 utilise l'API HTML5 navigator.geolocation pour détecter automatiquement la position du navigateur.

Les données enregistrées pour chaque annonce sont :

Seules les annonces ayant des coordonnées lat/lon apparaissent sur la vue carte.

Recherche par ville sur la page d'accueil

La barre de recherche principale (hero) comporte un champ Ville entre le champ de mots-clés et le sélecteur de catégorie.

• Saisissez un nom de ville partiel (ex : Paris, Lyon, Mars…).
• La recherche est soumise vers la page des annonces avec le paramètre ?city=valeur.
• La correspondance est insensible à la casse et partielle (type LIKE %valeur%).

Filtre par ville dans la barre latérale

Sur la page des annonces (/annonces), la barre latérale de filtres propose un champ Ville.

• Il prend la valeur du paramètre GET city et la transmet à la requête SQL.
• Compatible avec les autres filtres (catégorie, prix, type de prix).
• Les annonces sans ville renseignée ne correspondent pas à un filtre ville actif.

Vue carte des annonces

La page des annonces propose trois modes d'affichage via les boutons en haut à droite de la liste :

Fonctionnement de la vue carte

1. Au premier clic sur le bouton Carte, les annonces géolocalisées correspondant aux filtres actifs sont chargées via l'API (?map_mode=1).
2. Jusqu'à 500 annonces sont affichées simultanément.
3. Les marqueurs proches sont regroupés automatiquement (clustering) :
4. Un clic sur un marqueur (ou un cluster dézoomé) ouvre une popup avec :

La vue carte n'est pas paginée : elle charge en une seule requête toutes les annonces géolocalisées correspondant aux filtres courants (hors page et sort).

Persistance de la vue

Le dernier mode d'affichage choisi (grille, liste ou carte) est mémorisé dans localStorage sous la clé adsView. Il est restauré automatiquement à chaque visite de la page des annonces.

Données de localisation dans l'API

L'endpoint GET /api/ads accepte les paramètres de filtrage suivants :

Les champs lat, lon et city sont inclus dans la réponse de chaque annonce.

Exemple — annonces géolocalisées à Paris

GET /api/ads?city=Paris&map_mode=1

Réponse :

{
  "success": true,
  "data": {
    "ads": [
      {
        "id": 42,
        "title": "Vélo de course carbone",
        "slug": "velo-de-course-carbone",
        "price": 850,
        "currency": "EUR",
        "city": "Paris",
        "lat": 48.8566700,
        "lon": 2.3514992,
        "primary_image": "https://..."
      }
    ]
  }
}

Bonnes pratiques

• Encouragez la saisie de la localisation : les annonces sans coordonnées n'apparaissent pas sur la vue carte, ce qui réduit leur visibilité.
• Localisation héritée : lors du dépôt d'une première annonce, le champ Localisation est pré-rempli avec la ville du profil utilisateur si elle est renseignée.
• Performances : pour les sites avec un très grand nombre d'annonces géolocalisées (> 10 000), envisagez d'ajouter un index spatial sur les colonnes lat et lon :

ALTER TABLE ads ADD INDEX idx_lat_lon (lat, lon);

• Quota Google Maps : l'API Places est facturée après 100 $ de crédit mensuel gratuit. Activez les alertes de budget dans Google Cloud pour éviter les mauvaises surprises.