Depuis Google Maps

Google Maps Platform, c'est trois produits derrière une clé : une carte, Places et Directions. unmap fait les mêmes trois métiers, au Canada, sur une carte MapLibre. Le moteur de rendu change. Les appels raccourcissent. L'ordre des coordonnées s'inverse.

Restez sur Google si Street View, les photos de lieux ou une carte hors du Canada portent l'application. unmap n'a rien de tout cela. Tout ce qui suit suppose que vous remplacez une carte canadienne, une recherche canadienne ou un itinéraire canadien.

npm i @unmap/sdk

pnpm add @unmap/sdk

yarn add @unmap/sdk

bun add @unmap/sdk

Vous arrivez d'une balise <script> ? unmap se charge de la même façon, sans étape de compilation : voyez le Démarrage rapide.

Google construit un Map impératif et lui parle par des mutateurs. unmap construit une carte MapLibre et vous la rend. Ensuite, l'API de MapLibre est l'API de la carte.

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 51.0447, lng: -114.0719 },
  zoom: 11,
  mapTypeId: "roadmap",
});

import { Unmap } from "@unmap/sdk";
 
const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

roadmap devient style: "base". hybrid et satellite n'ont pas d'équivalent : unmap sert des tuiles vectorielles, pas de l'imagerie. terrain est le style outdoor, qui ajoute l'ombrage et les courbes de niveau. Les douze styles, chacun en clair et en sombre, sont sur l'API de cartes.

Importez la feuille de style MapLibre (import "maplibre-gl/dist/maplibre-gl.css") et donnez une hauteur au conteneur. Une boîte sans hauteur est une carte de zéro pixel, et MapLibre ne signale aucune erreur.

Coordonnées

Google utilise { lat, lng } et latLng.lat(). unmap utilise [lng, lat], longitude d'abord, l'ordre GeoJSON. Inversez-les et la carte atterrit dans l'océan Indien.

unmap.map est la carte MapLibre GL. Caméra, événements, sources et couches sont documentés en amont, pas ici.

Google crée un Marker par point et une InfoWindow par clic. MapLibre fait le même travail avec Marker et Popup. Au-delà d'une centaine de points, ajoutez-les comme source GeoJSON : WebGL les dessine, le DOM non.

const marker = new google.maps.Marker({
  position: { lat: 51.0447, lng: -114.0719 },
  map,
  title: "Calgary Tower",
});
 
const info = new google.maps.InfoWindow({ content: "<p>Calgary Tower</p>" });
marker.addListener("click", () => info.open(map, marker));

import { maplibregl } from "@unmap/sdk";
 
new maplibregl.Marker()
  .setLngLat([-114.0719, 51.0447])
  .setPopup(new maplibregl.Popup().setHTML("<p>Calgary Tower</p>"))
  .addTo(unmap.map!);

import { Unmap, maplibregl } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.0719, 51.0447],
  zoom: 11,
});

const [place] = await unmap.geocoder.search("Calgary Tower");

new maplibregl.Marker({ color: "#FF3E9A" })
  .setLngLat([place.lng, place.lat])
  .setPopup(new maplibregl.Popup().setText(place.name))
  .addTo(unmap.map!);

marker.setMap(null) devient marker.remove(). Il n'y a pas d'AdvancedMarkerElement ; une icône personnalisée est un élément HTML passé à new maplibregl.Marker({ element }), ou une couche symbol pour les grands ensembles.

Places findPlaceFromQuery et le widget Autocomplete deviennent geocoder.search et geocoder.autocomplete. Les deux renvoient un tableau JSON. Il n'y a pas de widget Places à déposer : vous affichez la liste.

const geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: "Calgary Tower" }, (results, status) => {
  if (status === "OK") map.setCenter(results[0].geometry.location);
});

const results = await unmap.geocoder.search("Calgary Tower");
const [first] = results;
if (first) unmap.map!.setCenter([first.lng, first.lat]);

const hints = await unmap.geocoder.autocomplete("calgary tow", { limit: 5 });

import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({ key: "um_live_..." });

const results = await unmap.geocoder.search("Calgary Tower", { limit: 3 });

Un résultat est id, name, layer, lng, lat, plus names et address lorsqu'ils existent. Il n'y a pas de place_id réutilisable plus tard chez Google, ni de photos, d'avis ou d'heures d'ouverture. La forme complète est sur l'API de géocodage.

Les jetons de session d'AutocompleteService et la facturation par frappe ne s'appliquent pas. Chaque requête compte pour un appel sur un seul compteur ; voir Forfaits et limites.

Places Nearby Search (type: "pharmacy") est geocoder.nearby. Passez un mot de catégorie en anglais ou en français, ou un identifiant de taxonomie comme health.pharmacy.

const service = new google.maps.places.PlacesService(map);
service.nearbySearch({ location: { lat: 51.05, lng: -114.07 }, radius: 1000, type: "pharmacy" }, handle);

const nearby = await unmap.geocoder.nearby("pharmacy", {
  near: [-114.07, 51.05],
  radius: 1000,
  limit: 5,
});

Les résultats arrivent triés par distance, avec distance en mètres sur chaque ligne. Il n'y a pas de classement par notoriété, ni de niveau de prix, ni de suivi Place Details.

DirectionsService plus DirectionsRenderer deviennent un appel router.route et une ligne GeoJSON que vous ajoutez vous-même.

const directions = new google.maps.DirectionsService();
directions.route(
  {
    origin: { lat: 51.0447, lng: -114.0719 },
    destination: { lat: 51.0899, lng: -113.9871 },
    travelMode: "DRIVING",
  },
  (res, status) => {
    if (status === "OK") renderer.setDirections(res);
  },
);

const route = await unmap.router.route([-114.0719, 51.0447], [-113.9871, 51.0899], {
  mode: "auto",
});
 
unmap.map!.addSource("route", {
  type: "geojson",
  data: { type: "Feature", properties: {}, geometry: route.geometry },
});
unmap.map!.addLayer({
  id: "route",
  type: "line",
  source: "route",
  paint: { "line-color": "#3887be", "line-width": 4 },
});

import { Unmap } from "@unmap/sdk";

const unmap = new Unmap({
  key: "um_live_...",
  container: "map",
  center: [-114.03, 51.07],
  zoom: 11,
});

const route = await unmap.router.route([-114.0719, 51.0447], [-113.9871, 51.0899], { mode: "auto" });

unmap.map!.on("load", () => {
  unmap.map!.addSource("route", {
    type: "geojson",
    data: { type: "Feature", properties: {}, geometry: route.geometry },
  });
  unmap.map!.addLayer({
    id: "route-line",
    type: "line",
    source: "route",
    layout: { "line-cap": "round", "line-join": "round" },
    paint: { "line-color": "#FF3E9A", "line-width": 3 },
  });
});

DRIVING est auto (ou car, le même profil). WALKING est pedestrian. BICYCLING est bicycle. TRANSIT n'a pas d'équivalent. Il n'y a pas de points de passage : une requête est exactement deux points. distanceMeters et durationSeconds sont des mètres et des secondes, pas le texte que Google met sur l'itinéraire.

Les zones de temps de trajet sont router.isochrone, que Google ne livre pas comme API de premier plan :

const bands = await unmap.router.isochrone([-114.07, 51.05], { minutes: [10, 20] });

L'API d'itinéraires documente les modes, le profil camion et ce qui échoue hors du Canada.

Ce qui n'a pas d'équivalent

• Street View. Aucun service de panorama.
• Photos de lieux, avis, heures d'ouverture, numéros de téléphone. Le géocodage renvoie un nom, une coordonnée et une adresse structurée.
• Distance Matrix et Roads. Pas de matrice de temps de trajet, pas d'accrochage à la route.
• Drawing Manager et cartes de chaleur. MapLibre Draw et une couche heatmap sont les remplacements côté MapLibre ; unmap ne les encapsule pas.
• Couverture mondiale. Canada seulement. Un itinéraire qui quitte le pays est un 400.
• Imagerie satellite et hybride.

Si l'un de ces points est la raison d'être de l'application, ne migrez pas cette partie.

Liste de vérification

• Clé depuis le tableau de bord, présentée comme um_live_... ou um_test_...
• { lat, lng } inversé en [lng, lat] partout, y compris dans les données stockées
• Feuille de style de la carte importée et hauteur donnée au conteneur
• Repères et infobulles sur unmap.map
• Recherche, saisie semi-automatique, proximité et inverse pointés vers unmap.geocoder
• Itinéraires pointés vers unmap.router, avec la ligne dessinée en GeoJSON
• Street View, Place Details et imagerie abandonnés ou laissés chez Google
• Origine configurée pour le trafic de production (Forfaits et limites)

Le Guide de démarrage est la même carte construite de zéro. Les Exemples sont une idée par page si vous préférez copier un fichier qui marche plutôt que d'en traduire un.