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 • Edited on

5 3

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

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (6)

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
 
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
 
tichel profile image
tichel

many thanks for your great tutorial

Collapse
 
sangilyun profile image
SangilYun

Thank you so much!

Collapse
 
anandbhaskaran profile image
Anand

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

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay