Comment intégrer Google Maps dans une application Vue 3

Dans cet article, nous verrons comment intégrer Google Maps à notre application Vue 3. Nous utiliserons la bibliothèque vue3-google-map.

Ajouter Google Maps dans une application Vue 3

Nous pouvons ajouter Google Maps dans notre application Vue 3 avec certaines bibliothèques intégrées. Une bibliothèque que nous pouvons utiliser pour ajouter Google est la bibliothèque vue3-google-map. Pour l’installer, nous exécutons

npm install -S vue3-google-map

avec npm.

Ensuite on peut ajouter une carte Google basique avec un marqueur en écrivant :

<template>
  <GoogleMap
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <Marker :options="{ position: center }" />
  </GoogleMap>
</template>

<script>
import { GoogleMap, Marker } from "vue3-google-map";

const YOUR_GOOGLE_MAPS_API_KEY = "--";

export default {
  name: "App",
  components: { GoogleMap, Marker },
  data() {
    const center = { lat: 40.689247, lng: -111.044502 };
    return { center, YOUR_GOOGLE_MAPS_API_KEY };
  },
};
</script>

YOUR_GOOGLE_MAPS_API_KEY est la clé API permettant d’utiliser l’API Google Maps.

La clé API peut être obtenue en allant sur https://developers.google.com/maps/documentation/javascript/get-api-key et en suivant les instructions. Les informations de carte de crédit sont nécessaires pour obtenir une clé, même si nous souhaitons simplement bénéficier d’un essai gratuit.

Nous ajoutons la carte avec le GoogleMap composant. Nous définissons le centre de la carte avec le center prop et le zoom par défaut avec le zoom soutenir. Et nous avons un marqueur sur la carte avec le Marker composant.

Nous définissons les coordonnées du marqueur en définissant le options accessoire à { position: center }. De plus, nous devons définir la largeur et la hauteur de la carte pour que la carte soit rendue.

Nous pouvons en ajouter davantage aux marqueurs. Une chose que nous pouvons ajouter, ce sont les fenêtres d’informations. Pour ce faire, nous utilisons le InfoWindow composant.

Pour l’utiliser, on écrit :

<template>
  <GoogleMap
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="10"
  >
    <Marker :options="{ position: center }">
      <InfoWindow>
        <div id="content">
          <h1 id="firstHeading" class="firstHeading">Denver</h1>
          <div id="bodyContent">
            <p>
              Denver is a consolidated city and county, the capital, and most
              populous city of the U.S. state of Colorado
            </p>
          </div>
        </div>
      </InfoWindow>
    </Marker>
  </GoogleMap>
</template>

<script>
import { GoogleMap, Marker, InfoWindow } from "vue3-google-map";

const YOUR_GOOGLE_MAPS_API_KEY = "--";
export default {
  name: "App",
  components: { GoogleMap, Marker, InfoWindow },
  data() {
    const center = { lat: 39.739, lng: -104.984 };

    return { center, YOUR_GOOGLE_MAPS_API_KEY };
  },
};
</script>

Nous imbriquons simplement le InfoWindow composant au sein du Marker composant afin que la fenêtre d’informations s’affiche lorsque le marqueur est cliqué.

Les classes ajoutées sont les classes intégrées de l’API Google Map afin que la fenêtre d’informations ait des styles.

Un groupe de marqueurs peut être ajouté facilement. Nous utilisons le MarkerCluster et Marker Composants

Par exemple, nous pouvons écrire :

<template>
  <GoogleMap
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="10"
  >
    <MarkerCluster>
      <Marker
        v-for="(location, i) in locations"
        :options="{ position: location }"
        :key="i"
      />
    </MarkerCluster>
  </GoogleMap>
</template>

<script>
import { GoogleMap, Marker, MarkerCluster } from "vue3-google-map";

const YOUR_GOOGLE_MAPS_API_KEY = "--";

export default {
  name: "App",
  components: { GoogleMap, Marker, MarkerCluster },
  data() {
    const center = { lat: 37.739, lng: -111.1 };

    const locations = [
      { lat: 37.75, lng: -111.116667 },
      { lat: 37.759859, lng: -111.128708 },
      { lat: 37.765015, lng: -111.133858 },
      { lat: 37.770104, lng: -111.143299 },
      { lat: 37.7737, lng: -111 - 111187 },
      { lat: 37.774785, lng: -111.137978 },
      { lat: 37.819616, lng: 144.968119 },
      { lat: 38.330766, lng: 144.695692 },
      { lat: 39.927193, lng: 175.053218 },
      { lat: 41.330162, lng: 174.865694 },
      { lat: 42.734358, lng: 147.439506 },
      { lat: 42.734358, lng: 147.501315 },
      { lat: 42.735258, lng: 147.438 },
      { lat: 43.999792, lng: 170.463352 },
    ];

    return { center, locations, YOUR_GOOGLE_MAPS_API_KEY };
  },
};
</script>

Nous venons de mettre le Markerest à l’intérieur du MarkerCluster composant pour restituer un groupe de marqueurs. Avec cela, nous verrons le nombre de clusters dans une zone lorsque nous effectuerons un zoom arrière au lieu d’un tas de marqueurs.

Ajouter plus de fonctionnalités cartographiques à la carte

Nous pouvons ajouter plus de fonctionnalités à la carte. Par exemple, nous pouvons ajouter un chemin polyligne à la carte avec le Polyline composant.

Pour ce faire, nous écrivons :

<template>
  <GoogleMap
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="3"
  >
    <Polyline :options="flightPath" />
  </GoogleMap>
</template>

<script>
import { GoogleMap, Polyline } from "vue3-google-map";

const YOUR_GOOGLE_MAPS_API_KEY = "--";

export default {
  name: "App",
  components: { GoogleMap, Polyline },
  data() {
    const center = { lat: 0, lng: -122 };
    const flightPlanCoordinates = [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 },
    ];
    const flightPath = {
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2,
    };

    return { center, flightPath, YOUR_GOOGLE_MAPS_API_KEY };
  },
};
</script>

Il suffit de définir les valeurs du trait et les coordonnées du chemin avec un tableau d’objets avec le lat et lng propriétés avec la latitude et la longitude, respectivement.

Les autres fonctionnalités cartographiques disponibles incluent des polygones, des rectangles, des cercles et bien plus encore.

Événements de la carte

Les composants de la bibliothèque vue3-google-map émettent des événements intégrés que nous pouvons gérer.

Pour ajouter un gestionnaire d’événements pour un composant, nous pouvons écrire quelque chose comme :

<template>
  <GoogleMap
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="3"
  >
    <Polyline :options="flightPath" @click="onClick" />
  </GoogleMap>
</template>

<script>
import { GoogleMap, Polyline } from "vue3-google-map";

const YOUR_GOOGLE_MAPS_API_KEY = "--";
export default {
  name: "App",
  components: { GoogleMap, Polyline },
  data() {
    const center = { lat: 0, lng: -122 };
    const flightPlanCoordinates = [
      { lat: 37.772, lng: -122.214 },
      { lat: 21.291, lng: -157.821 },
      { lat: -18.142, lng: 178.431 },
      { lat: -27.467, lng: 153.027 },
    ];
    const flightPath = {
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2,
    };

    return { center, flightPath, YOUR_GOOGLE_MAPS_API_KEY };
  },
  methods: {
    onClick(e) {
      const { lat, lng } = e.latLng;
      alert(`${lat()}, ${lng()}`);
    },
  },
};
</script>

Nous ajoutons un Polyline sur notre carte comme nous le faisions auparavant. Mais nous ajoutons un gestionnaire d’événements de clic au Polyline avec le @click directive et configurez-la pour qu’elle appelle onClick lorsque l’on clique sur la polyligne.

Dans onClickon obtient la latitude et la longitude sur lesquelles on a cliqué avec le e.latLng.lat et e.latLng.lng fonction respectivement.

Il existe de nombreux autres événements émis par les composants, nous pouvons donc faire bien plus que gérer les clics sur une entité cartographique.

Conclusion

Nous pouvons facilement ajouter une carte Google Map dans notre application Vue 3 avec le vue3-google-map bibliothèque et une API Google Map.

Il est livré avec de nombreux composants, dont la plupart émettent des événements que nous pouvons gérer pour que la carte fasse ce dont nous avons besoin.