DEV Community

Cover image for Create Your Own Vue3 Google Maps Component and Deploy to Mobile with Ionic Framework & Capacitor
Aaron K Saunders
Aaron K Saunders

Posted on • Updated on

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

Video Series

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

USAGE

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 (4)

Collapse
bertoloti profile image
bertoloti • Edited on

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
quonn77 profile image
Alessio Iannone

Can you please share whole source code of project?... I am not new to development, but just new to Vue and Ionic (this is my first day), I was wondering why my ionic server is not able to found the GMap module, probably there is something that I need to know, but if I can take a look from the whole source code I could easily find the solution.
Regards

Collapse
quonn77 profile image
Alessio Iannone

By having added GMap.vue under views folder of the Vue project, for me the problem was to include the GMap by referencing the file adding ./ to the import so
the wrong import was
import GMap from "views/GMap.vue";

The right import is
import GMap from "./views/GMap.vue";

I was used that relative import doesn't need to be referenced with ./
....

Collapse
anandbhaskaran profile image
Anand

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