How to Integrate Google Maps into a Vue 3 Application

In this article, we will look at how to integrate Google Maps to our Vue 3 app. We will use the vue3-google-map library.

Add Google Maps into a Vue 3 Application

We can add Google Maps into our Vue 3 application with some built-in libraries. One library we can use to add Google is the vue3-google-map library. To install it, we run

npm install -S vue3-google-map

with npm.

Then we can add a basic Google map with a marker by writing:

<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 is the API key for using the Google Maps API.

The API key can be obtained by going to https://developers.google.com/maps/documentation/javascript/get-api-key and following the instructions. Credit card info is required to get a key even if we just want to get a free trial.

We add the map with the GoogleMap component. We set the map center with the center prop and the default zoom with the zoom prop. And we a marker to the map with the Marker component.

We set the marker coordinates by setting the options prop to { position: center }. Also, we have to set the width and height of the map so that the map will render.

We can add more to markers. One thing we can add are info windows. To do this, we use the InfoWindow component.

To use it, we write:

<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>

We just nest the InfoWindow component within the Marker component so that the info window shows when the marker is clicked.

The classes added are the built-in Google Map API classes so that the info window has styles.

A cluster of markers can be added easily. We use the MarkerCluster and Marker components

For instance, we can write:

<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>

We just put the Markers inside the MarkerCluster component to render a cluster of markers. With this, we will see the number of clusters in an area when we zoom out instead of a bunch of markers.

Add More Map Features to the Map

We can add more features to the map. For instance, we can add a polyline path to the map with the Polyline component.

To do this, we write:

<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>

We just have to set the stroke values and the path coordinates with an array of objects with the lat and lng properties with the latitude and longitude, respectively.

Other map features available include polygons, rectangles, circles and more.

Map Events

The vue3-google-map library components emits built-in events that we can handle.

To add an event handler for a component, we can write something like:

<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>

We add a Polyline into our map as we did before. But we add a click event handler to the Polyline with the @click directive and set it to call onClick when the polyline is clicked.

In onClick, we get the latitude and longitude that we clicked on with the e.latLng.lat and e.latLng.lng function respectively.

There are many other events that are emitted by the components so we can do a lot more than handling clicks on a map feature

Conclusion

We can add a Google Map into our Vue 3 app easily with the vue3-google-map library and a Google Map API.

It comes with many components, most of which emit events that we can handle to make the map do what we need.