Google Maps - Premiers pas

Que sont Google Maps?

Google Maps est un service de cartographie Web gratuit de Google qui fournit différents types d'informations géographiques. En utilisant Google Maps, on peut.

Recherchez des lieux ou obtenez des itinéraires d'un lieu à un autre.
Visualisez et parcourez des images panoramiques horizontales et verticales au niveau de la rue de diverses villes du monde.
Obtenez des informations spécifiques comme le trafic à un moment donné.

Google Maps fournit une API à l'aide de laquelle vous pouvez personnaliser les cartes et les informations qui y sont affichées. Ce chapitre explique comment charger une simple carte Google Map sur votre page Web en utilisant HTML et JavaScript.

Procédure de chargement de la carte sur une page Web

Suivez les étapes ci-dessous pour charger une carte sur votre page Web -

Étape 1: créer une page HTML

Créez une page HTML de base avec des balises head et body comme indiqué ci-dessous -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Étape 2: chargez l'API

Chargez ou incluez l'API Google Maps à l'aide de la balise de script comme indiqué ci-dessous -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Étape 3: créer le conteneur

Pour contenir la carte, nous devons créer un élément conteneur, généralement la balise <div> (un conteneur générique) est utilisée à cet effet. Créez un élément conteneur et définissez ses dimensions comme indiqué ci-dessous -

<div id = "sample" style = "width:900px; height:580px;"></div>

Étape 4: Options de la carte

Avant d'initialiser la carte, nous devons créer un mapOptionsobjet (il est créé comme un littéral) et définit les valeurs des variables d'initialisation de la carte. Une carte a trois options principales, à savoir,centre, zoom, et maptypeid.

centre- Sous cette propriété, nous devons spécifier l'emplacement où nous voulons centrer la carte. Pour passer l'emplacement, nous devons créer unLatLng objet en passant la latitude et les longitudes de l'emplacement requis au constructeur.
zoom - Sous cette propriété, nous devons spécifier le niveau de zoom de la carte.
maptypeid- Sous cette propriété, nous devons spécifier le type de carte que nous voulons. Voici les types de cartes fournies par Google -
- ROADMAP (carte 2D normale par défaut)
- SATELLITE (carte photographique)
- HYBRIDE (combinaison de deux ou plusieurs autres types)
- TERRAIN (carte avec montagnes, rivières, etc.)

Dans une fonction, disons, loadMap(), créez l'objet mapOptions et définissez les valeurs requises pour center, zoom et mapTypeId comme indiqué ci-dessous.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Étape 5: créer un objet cartographique

Vous pouvez créer une carte en instanciant la classe JavaScript appelée Map. Lors de l'instanciation de cette classe, vous devez passer un conteneur HTML pour contenir la carte et les options de carte pour la carte requise. Créez un objet cartographique comme indiqué ci-dessous.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Étape 6: charger la carte

Enfin, chargez la carte en appelant la méthode loadMap () ou en ajoutant un écouteur DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Exemple

L'exemple suivant montre comment charger la feuille de route de la ville nommée Vishakhapatnam avec une valeur de zoom de 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

↰ Previous page Next page ↱