DEV Community

loading...
Cover image for Create Your Own Vue3 Google Maps Component and Deploy to Mobile with Ionic Framework & Capacitor

Create Your Own Vue3 Google Maps Component and Deploy to Mobile with Ionic Framework & Capacitor

Aaron K Saunders
See more, like and subscribe 👉🏾 ‪Aaron Saunders 📺 https://www.youtube.com/aaronsaundersci?sub_confirmation=1
・2 min read

Create Your Own Vue3 Google Maps Component with Ionic Framework & Capacitor

Maps are a critical part of many web and mobile solutions and the rich set of functionality provided by Google Maps make it an obvious choice in many situations. When I was looking for a Vue3 compatible solution I really didn't find anything I loved so I decided to see how to roll my own.

In this video, we create a vue 3 google map component using the newer SFC component with setup. We will add marker, infoboxes, event handlers, and access to related services as we work through the project video series.

We will end each of the videos in the series by deploying the application to IOS and Android devices to showcase Ionic Capacitor which you can use to deploy any web framework mobile, web, and pwa.

ENJOY PART 1

LINKS

USEAGE

The component can be used in your page by first creating the .env file to hold your google maps key

VUE_APP_GOOGLEMAPS_KEY="AIzaSyDfu-PKZ1zO8POkdlrSWG36pLZEtbH5cz8"
Enter fullscreen mode Exit fullscreen mode

and the in the parent component

<g-map
  :disableUI="false"
  :zoom="12"
  mapType="roadmap"
  :center="{ lat: 38.8977859, lng: -77.0057621 }">
</g-map>
Enter fullscreen mode Exit fullscreen mode

SOURCE CODE

<template>
  <div class="map" ref="mapDivRef"></div>
</template>

<script>
import { ref, onBeforeMount, onMounted } from "vue";

export default {
  name: "GMap",
  props: {
    center: { lat: Number, lng: Number },
    zoom: Number,
    mapType: String,
    disableUI: Boolean
  },
  setup(props) {
    // the google map object
    const map = ref(null);

    // the map element in the templste
    const mapDivRef = ref(null);

    // load in the google script
    onMounted(() => {
      // key is is the .env file
      const key = process.env.VUE_APP_GOOGLEMAPS_KEY;

      // create the script element to load
      const googleMapScript = document.createElement("SCRIPT");
      googleMapScript.setAttribute(
        "src",
        `https://maps.googleapis.com/maps/api/js?key=${key}&callback=initMap`
      );
      googleMapScript.setAttribute("defer", "");
      googleMapScript.setAttribute("async", "");
      document.head.appendChild(googleMapScript);
    });

    /**
     * this function is called as soon as the map is initialized
     */
    window.initMap = () => {
      map.value = new window.google.maps.Map(mapDivRef.value, {
        mapTypeId: props.mapType || "hybrid",
        zoom: props.zoom || 8,
        disableDefaultUI: props.disableUI || false,
        center: props.center || { lat: 38.0, lng: -77.01 }
      });
    };

    return {
      mapDivRef
    };
  }
};
</script>

<style lang="css" scoped>
.map {
  width: 100%;
  height: 300px;
  background-color: azure;
}
</style>
Enter fullscreen mode Exit fullscreen mode


Medium

Discussion (2)

Collapse
bertoloti profile image
bertoloti • Edited

I'm using this code for an app that I'm building but I'm having trouble how to use this GMap component within a ionic modal. Basically i want to show a modal with a Google map every time an item of a location list is clicked but i getting the following error:

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

Tried tweaking the code to add the script only once by checking if the window.google was undefined to avoid the error but when I so, then the Map is only rendered on the first click. Any idea how to properly work around the issue? Thanks

Collapse
anandbhaskaran profile image
Anand

This is awesome! Can you briefly tell us what was the complexity when doing the same with the typescript?