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

• More Ionic VueJS and ReactJS Video Content FiWiC YouTube Channel

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

• Ionic Framework is a platform to build, secure, deploy, and scale modern native and mobile web apps across any platform. No platform unlocks more productivity. Front to back, start to finish
• Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS]
• Google Maps Javascript API https://developers.google.com/maps/documentation/javascript/overview
• Questions about Typescript In Google Maps

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"

and the in the parent component

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

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>

Comments

[bertoloti]

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

[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

[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 ./
....

[tichel]

many thanks for your great tutorial

[SangilYun]

Thank you so much!

[Anand]

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