Posted on Jun 20 In this blog post, we'll explore how to build a Vue.js mobile application that integrates with Google Maps using the Ionic Capacitor Google Map Plugin. We'll walk through the code step by step, discussing the code in the script section and the template section of the components used to build this web and mobile applicationThis application is built using Ionic Framework and Vue JS. We are only using Ionic Framework for the UI components, and those components can be replaced with any vue js compatible UI componentsImports:We start by importing the necessary dependencies and components. We import Ionic framework components from the @ionic/vue package, and we use the vue package to access the ref function, which enables us to create reactive references. Additionally, we import two custom components, MyMap and MarkerInfoWindow, from other files. Lastly, we import Capacitor from the Capacitor framework, which is used for building cross-platform apps.Variable Declarations:We declare two reactive reference variables: markerInfo and markerIsOpen. These variables will hold information about the currently selected marker and whether the marker popover is open or closed, respectively.We define an array called markerData that holds sample data for markers on the map. Each marker object consists of coordinates (latitude and longitude), a title, and a snippet. You can customize this data by adding more markers as needed.Functions:openModal is an event handler for when a marker is clicked. It creates and presents a modal window using modalController.create(). The modal displays the MarkerInfoWindow component, which shows detailed information about the marker.mapClicked is an event listener for when the map is clicked. It simply logs a message to the console, allowing you to perform any desired actions when the map is clicked.getMarkerInfo takes a marker object as input and returns the associated information from the markerData array. This function is used to retrieve the marker information when a marker is clicked.markerClicked is an event handler for when a marker is clicked. It checks if the platform is not native (i.e., running on the web) using Capacitor.isNativePlatform(). If it is not native, it calls the openModal function to display the marker information in a modal. This distinction is necessary because the web version doesn't show an info window directly on the map.The template section defines the structure and layout of our component's HTML template using Ionic Vue components. Let's go through it: represents a page within our Ionic app. It provides a container for the entire content. contains the header toolbar for the page. We use it to display the app title. represents a toolbar within the header. It provides a place for buttons, titles, and other elements. displays the title of the page. In this case, it's set to "Vue + Capacitor + Google Maps". contains the main content of the page. It provides a scrollable area where we'll display our map and markers. is a custom component that represents the map. We pass in the markerData prop to provide the marker information. The component also emits two events: onMapClicked and onMarkerClicked, which allow us to handle map and marker clicks, respectively. represents a popover, which is a small overlay window. It takes the isOpen prop to control the popover's visible statusIn this section, we'll discuss a new component responsible for rendering the map and markers using the Capacitor Google Maps plugin. We'll explain the script section, which contains the logic, and the template section, which defines the component's structure.The script section contains the logic and functionality of the custom map component. Let's break it down:ImportsWe import necessary functions from the vue package, such as onMounted, nextTick, ref, and onUnmounted. These functions are used to handle component lifecycle events. We also import the GoogleMap object from the @capacitor/google-maps package, which provides the functionality to interact with the Google Maps plugin.Props and Emits DeclarationsThe component defines two parts: props and emits. Props allow us to pass data into the component, and emits enable us to trigger custom events. In this case, the component expects a prop named markerData that contains an array of marker objects. The emits section declares two events: onMarkerClicked and onMapClicked. These events will be emitted back to the parent component when a marker or the map is clicked.Variable DeclarationsmapRef is a reactive reference variable that holds a reference to the map element in the DOM.markerIds is a reactive reference variable that holds an array of marker IDs.newMap is a variable that will hold an instance of the GoogleMap object.Lifecycle HooksonMounted is a lifecycle hook that runs when the component is mounted to the DOM. Inside this hook, we use nextTick to wait for the component to render completely. Then, we call the createMap function to initialize and render the map.onUnmounted is a lifecycle hook that runs when the component is about to be unmounted. Inside this hook, we call the removeMarkers method of the newMap object to remove the markers from the map.Function DeclarationsaddSomeMarkers is an async function that takes an instance of the GoogleMap object as a parameter. It removes any existing markers from the map and adds new markers based on the markerData prop passed to the component.createMap is an async function responsible for creating and rendering the map. It first checks if the mapRef value exists. Then, it uses the Capacitor Google Maps plugin to create a new map instance. It sets the map's ID, the associated DOM element, the API key, and the initial configuration (center and zoom level). After creating the map, it calls the addSomeMarkers function to add the markers to the map. Lastly, it sets event listeners to handle marker clicks and map clicks, emitting the appropriate events to the parent component.The template section defines the structure of the component's HTML template. Here's a breakdown: