doc.progysm.com

Utilisation

Google Maps interpole les adresses qui n'existe pas. C'est à dire que si on recherche "1910, rue X", il va afficher un point entre les deux bâtiments existant les plus proches. Au milieu de 1900 et 1920 par exemple.

Documentation

Name: Google Maps JavaScript API v3
Version: 3
Website: https://developers.google.com/maps/web/
         https://developers.google.com/maps/documentation/javascript/

Starting:
1. se connecter à un compte google
2. ouvrir la console google : console.developers.google.com
3. cliquer sur "Créer un projet" ou sur "Sélectionner un projet" > "+" (Créer un projet).
3.1 Choisir un nom de projet, créer. ouvrir.
3.2 Cliquer sur Activer les api et les services.
3.3 Chercher "Maps" et cliquer sur "Google Maps JavaScript API"
3.4 Cliquer sur Activer.
4 Cliquer sur l'onglet "Identifiants"
4.1 Cliquer sur sur le bouton "Créer des identifiants" > Clé API pour créé la clé API
4.2 Changer le nom "Google Maps - Website.com"
4.3 Cliquer sur "Resteindre la clé"
4.4 Choisir "Référents HTTP (site web)"  et ajouter l'url de votre site, ie: https://website.com/*    . Note ne pas oublier le * à la fin.
4.5 Attendre 5 minutes avant de modifier le code
4.6 Copier coller votre clé API en quelques part.

5. copier/coller l'exemple de google maps.

6. Modifier: 
   6.1 API_KEY : avec votre CLÉ DE L'API
   6.2 coordonnées center: {lat: 46.55, lng: -75.5},   // mont-laurier
   6.3 zoom : 8 = régions du Québec, 10 = MRC, 12 = Ville entière, 14 = rues de la ville (centre), 18 = max

7. Localisation
   6.4 ajouter &language=fr&region=CA à l'url de l'api
   "https://maps.googleapis.com/maps/api/js?key=API_KEY&language=fr&region=CA"


Erreur dans la console javascript (f12) si le référent n'est pas bon (oublier le * à la fin?)
Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://website.com/contact.html

Anciennes URLs:
//maps.google.com/maps/api/js
https://code.google.com/apis/console

Anciennes instructions:
3. dans la page "API et authentification > API", filtrer "Google Maps Javascript" et cliquer sur Google Maps JavaScript API v3  pour l'activer.
4. si elle est déjà activer, on peut ajouter une clé dans "Identifiant". Dans l'accès à l'API publique, cliquer sur "Créer une clé" ou utiliser une clé déjà existante "CLÉ DE L'API".

Map Type

google.maps.MapTypeId.ROADMAP | google.maps.MapTypeId.SATELLITE | google.maps.MapTypeId.HYBRID | google.maps.MapTypeId.TERRAIN

mapOptions: { mapTypeId: google.maps.MapTypeId.TERRAIN }

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

En version satellite, on peut changer l'angle (en degré) avec map.setTilt(45)

Avec Tilt, on peut changer l'orientation (en degré) avec map.setHeader(90). 0 = Nord.

Markers

var markerOptions = { 
  position: { lat: yy, lng: xx},// ou new google.maps.LatLng(yy, xx);
  map: map,                     // si on ne précise pas la map, on peut l'ajouter ensuite avec marker.setMap(map)
  title: "test",                // tooltip
  icon: "url"
};
var marker = new google.maps.Marker(markerOptions);

// enlever un marker: marker.setMap(null); marker = null;

// animation

Google Maps Web

Getting Started with Google Maps API