This application is built using Ionic Framework and Vue JS. We only use Ionic Framework for UI components which can be replaced with any vue js compatible UI components
homepage.vue
Script section:
Import :
We start by importing the necessary dependencies and components. We import the Ionic framework components from the package @ionic/vueand use the vue package to access the ref function, which allows us to create reactive refs. Also, we import two custom components MyMapand from other files. MarkerInfoWindowFinally, we import from the Capacitor framework Capacitor, which is used for building cross-platform applications.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">IonContent</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">IonHeader</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">IonPage</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">IonTitle</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">IonToolbar</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">IonPopover</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">modalController</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">@ionic/vue</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">ref</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">vue</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">MyMap</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">./MyMap.vue</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">MarkerInfoWindow</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../components/MarkerInfoWindow.vue</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">Capacitor</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">@capacitor/core</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>Variable declarations :
We declare two reactive reference variables: markerInfoand 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 named markerDatato hold the sample data of the markers on the map. Each marker object consists of coordinates(latitude and longitude), a titleand a snippet. You can add more tags to customize this data as needed.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">markerInfo</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">ref</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">any</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">markerIsOpen</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">ref</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">boolean</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// sample data for the map</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">markerData</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">[</span>
<span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">lat</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">37.769</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">lng</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-literal-color)">122.446</span> <span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">title one</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">snippet</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">title one snippet content will be presented here</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">lat</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">37.774</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">lng</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-literal-color)">122.434</span> <span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">title two</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">snippet</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">title two snippet content will be presented here</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">lat</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">37.783</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">lng</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-literal-color)">122.408</span> <span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">title three</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">snippet</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">title three snippet content will be presented here</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-comment-color)">// Add more points as needed</span>
<span style="color:var(--syntax-text-color)">];</span>
</code></span></span>function :
openModalis the event handler for when the marker is clicked. It uses to create and present a modal window modalController.create(). A modal display MarkerInfoWindowcomponent showing detailed information about it marker.
mapClickedis the event listener for when the map is clicked. It just logs a message to the console, allowing you to do whatever you want when you click on the map.
getMarkerInfoTakes markeran object as input and returns the associated information in an array markerData. This function is used to retrieve marker information when a marker is clicked.
markerClickedis the event handler for when the marker is clicked. It uses Capacitor.isNativePlatform(). If it is not native, it calls the function openModalto display the marker information modally. This distinction is necessary because the web version does not display an info window directly on the map.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">openModal</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">marker</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">any</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">modal</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">modalController</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">({</span>
<span style="color:var(--syntax-name-color)">component</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">MarkerInfoWindow</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">componentProps</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">marker</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">initialBreakpoint</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.2</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">breakpoints</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-literal-color)">0.2</span><span style="color:var(--syntax-text-color)">],</span>
<span style="color:var(--syntax-name-color)">backdropBreakpoint</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">showBackdrop</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">backdropDismiss</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-name-color)">modal</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">present</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">role</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">modal</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">onWillDismiss</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">mapClicked</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">mapClicked</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">getMarkerInfo</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">marker</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-text-color)">latitude</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">number</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-text-color)">longitude</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">number</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-name-color)">markerData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">filter</span><span style="color:var(--syntax-text-color)">(</span>
<span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">m</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span>
<span style="color:var(--syntax-name-color)">m</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">lat</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-name-color)">marker</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">latitude</span> <span style="color:var(--syntax-error-color)">&&</span>
<span style="color:var(--syntax-name-color)">m</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">lng</span> <span style="color:var(--syntax-error-color)">===</span> <span style="color:var(--syntax-name-color)">marker</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">longitude</span>
<span style="color:var(--syntax-text-color)">)[</span><span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">];</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">markerClicked</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">any</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// only use dialog in web since we doesnt show info window</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">Capacitor</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">isNativePlatform</span><span style="color:var(--syntax-text-color)">())</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">openModal</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">getMarkerInfo</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">));</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>Template section:
The template section defines the structure and layout of our component's HTML template using Ionic Vue components. Let's take a look:
<ion-page>Represents a page in our Ionic application. It provides a container for the entire content.
<ion-header>Contains the title toolbar for the page. We use it to display the application title.
<ion-toolbar>Represents a toolbar within a header. It provides positions for buttons, titles, and other elements.
<ion-title>Displays the title of the page. In this case it is set to "Vue + Capacitor + Google Maps".
<ion-content>Contains the main content of the page. It provides a scrollable area where we will display our map and markers.
<my-map>is a custom component that represents a map. We pass in markerDataprops to provide markup information. The component also emits two events: onMapClickedand onMarkerClicked, which allow us to handle map and marker clicks separately.
<ion-popover>Represents a popup window, which is a small overlay window. It needs isOpenprop to control the visible state of popover
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code> <span style="color:var(--syntax-error-color)"><ion-page></span>
<span style="color:var(--syntax-error-color)"><ion-header</span> <span style="color:var(--syntax-name-color)">:translucent=</span><span style="color:var(--syntax-string-color)">"true"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><ion-toolbar></span>
<span style="color:var(--syntax-error-color)"><ion-title></span>Vue + Capacitor + Google Maps<span style="color:var(--syntax-error-color)"></ion-title></span>
<span style="color:var(--syntax-error-color)"></ion-toolbar></span>
<span style="color:var(--syntax-error-color)"></ion-header></span>
<span style="color:var(--syntax-error-color)"><ion-content></span>
<span style="color:var(--syntax-error-color)"><my-map</span>
<span style="color:var(--syntax-name-color)">:markerData=</span><span style="color:var(--syntax-string-color)">"markerData"</span>
@<span style="color:var(--syntax-name-color)">onMapClicked=</span><span style="color:var(--syntax-string-color)">"mapClicked"</span>
@<span style="color:var(--syntax-name-color)">onMarkerClicked=</span><span style="color:var(--syntax-string-color)">"markerClicked"</span>
<span style="color:var(--syntax-error-color)">></my-map></span>
<span style="color:var(--syntax-error-color)"><ion-popover</span>
<span style="color:var(--syntax-name-color)">:is-open=</span><span style="color:var(--syntax-string-color)">"markerIsOpen"</span>
<span style="color:var(--syntax-name-color)">size=</span><span style="color:var(--syntax-string-color)">"cover"</span>
@<span style="color:var(--syntax-name-color)">did-dismiss=</span><span style="color:var(--syntax-string-color)">"markerIsOpen = false"</span>
<span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><ion-content</span> <span style="color:var(--syntax-name-color)">class=</span><span style="color:var(--syntax-string-color)">"ion-padding"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><div></span>{
{ markerInfo?.title }}<span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></ion-content></span>
<span style="color:var(--syntax-error-color)"></ion-popover></span>
<span style="color:var(--syntax-error-color)"></ion-content></span>
<span style="color:var(--syntax-error-color)"></ion-page></span>
</code></span></span>my map.vue
In this section, we'll discuss a new component responsible for rendering maps and markers using the Capacitor Google Maps plugin. We'll explain the script part that contains the logic and the template part that defines the structure of the component.
Script section:
The script section contains the logic and functionality of the custom map component. Let's break it down:
Imports
We import the necessary functions such as onMounted, nextTick, ref and onUnmounted from the vue package. 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.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">onMounted</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">nextTick</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">ref</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">onUnmounted</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">vue</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">GoogleMap</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">@capacitor/google-maps</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>Props and Emits Declaration
A component defines two parts: props and emits. Props allow us to pass data into components, while emits allow us to fire custom events.
In this case, the component expects a property called prop markerDatathat contains an array of markup objects.
The emit section declares two events: onMarkerClickedand onMapClicked. These events are sent back to the parent component when the marker or map is clicked.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-comment-color)">// PROPS</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">props</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">defineProps</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">markerData</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">any</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-text-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">string</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-text-color)">snippet</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">string</span> <span style="color:var(--syntax-text-color)">}[];</span>
<span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-comment-color)">// EVENTS</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">emits</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">defineEmits</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onMarkerClicked</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">info</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">any</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-declaration-color)">void</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onMapClicked</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-declaration-color)">void</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span>variable declaration
mapRefis a reactive reference variable that holds a reference to a map element in the DOM. markerIdsis a reactive reference variable that contains an array of marker IDs. newMapis a variable that will hold an instance of the GoogleMap object.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">mapRef</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">ref</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">HTMLElement</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">markerIds</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">ref</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">string</span><span style="color:var(--syntax-text-color)">[]</span> <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">GoogleMap</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>life cycle hook
onMountedis a lifecycle hook that runs when the component is mounted to the DOM. In this hook, we use to nextTickwait for the component to fully render. Then, we call this createMapfunction to initialize and render the map.
onUnmountedis a lifecycle hook that runs when the component is about to be unmounted. In this hook, we call the object removeMarkers's method newMapto remove the marker from the map.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">onMounted</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">mounted </span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">mapRef</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">nextTick</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">createMap</span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-comment-color)">// remove markers on unmount</span>
<span style="color:var(--syntax-name-color)">onUnmounted</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">console</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">log</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onunmounted</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">removeMarkers</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">markerIds</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-name-color)">string</span><span style="color:var(--syntax-text-color)">[]);</span>
<span style="color:var(--syntax-text-color)">});</span>
</code></span></span>function declaration
addSomeMarkersis an asynchronous function that takes an instance of a GoogleMap object as a parameter. It removes any existing markers from the map and adds new markers based on the markerData property passed to the component.
createMapis an asynchronous function responsible for creating and rendering the map. It first checks to see mapRefif the value exists. It then uses the Capacitor Google Maps plugin to create a new map instance. It sets the map's ID, associated DOM elements, API key, and initial configuration (center and zoom level).
After creating the map, it calls this addSomeMarkersfunction to add markers to the map. Finally, it sets up event listeners to handle marker clicks and map clicks, emitting appropriate events to the parent component.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">addSomeMarkers</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">GoogleMap</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">markerIds</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">removeMarkers</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">markerIds</span><span style="color:var(--syntax-text-color)">?.</span><span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-name-color)">string</span><span style="color:var(--syntax-text-color)">[]);</span>
<span style="color:var(--syntax-comment-color)">// Plot each point on the map</span>
<span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">markers</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">markerData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">(({</span> <span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">snippet</span> <span style="color:var(--syntax-text-color)">})</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">title</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">snippet</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-name-color)">markerIds</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">addMarkers</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">markers</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-comment-color)">/**
*
*/</span>
<span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">createMap</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">mapRef</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-declaration-color)">return</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-comment-color)">// render map using capacitor plugin</span>
<span style="color:var(--syntax-name-color)">newMap</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">await</span> <span style="color:var(--syntax-name-color)">GoogleMap</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">create</span><span style="color:var(--syntax-text-color)">({</span>
<span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">my-cool-map</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">element</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">mapRef</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">apiKey</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">import</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">meta</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">env</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">VITE_APP_YOUR_API_KEY_HERE</span> <span style="color:var(--syntax-declaration-color)">as</span> <span style="color:var(--syntax-name-color)">string</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">config</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">center</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">lat</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">37.783</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-name-color)">lng</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-literal-color)">122.408</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-name-color)">zoom</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">12</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-comment-color)">// add markers to map</span>
<span style="color:var(--syntax-name-color)">addSomeMarkers</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-comment-color)">// Set Event Listeners...</span>
<span style="color:var(--syntax-comment-color)">// Handle marker click, send event back to parent</span>
<span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">setOnMarkerClickListener</span><span style="color:var(--syntax-text-color)">((</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">emits</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onMarkerClicked</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-comment-color)">// Handle map click, send event back to parent</span>
<span style="color:var(--syntax-name-color)">newMap</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">setOnMapClickListener</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">emits</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onMapClicked</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">});</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>template section
The template section defines the structure of the component's HTML template. Here's a breakdown:
<div>: Acts as a container for the map component.
<capacitor-google-map>: Represents the custom map component provided by the Capacitor Google Maps plugin. It accepts a ref attribute (mapRef) to reference a map element and applies inline styles to set the map's display, width, and height.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><template></span>
<span style="color:var(--syntax-error-color)"><div></span>
<span style="color:var(--syntax-error-color)"><capacitor-google-map</span>
<span style="color:var(--syntax-name-color)">ref=</span><span style="color:var(--syntax-string-color)">"mapRef"</span>
<span style="color:var(--syntax-name-color)">style=</span><span style="color:var(--syntax-string-color)">"display: inline-block; width: 100vw; height: 86vh"</span>
<span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"></capacitor-google-map></span>
<span style="color:var(--syntax-error-color)"></div></span>
<span style="color:var(--syntax-error-color)"></template></span>
</code></span></span>In this section, we explored the code for a custom map component integrated with Capacitor and Google Maps. The script portion handles the logic, including creating the map, adding markers, and handling events. The template section defines the structure of the component's HTML template, which includes <div>the container and <capacitor-google-map>elements provided by the Capacitor Google Maps plugin.
mark infowindow.vue
In this section, we'll discuss Vue components that display markup information. InfoWindowWe're only using this component for the web version of the application in this example, since GoogleMaps isn't supported as expected.
We'll explain the template part that renders the markup data and the script part that defines the logic of the component.
Template section:
The template part is responsible for rendering the HTML structure of the component. Let's break it down:
<ion-content>:
This Ionic framework component represents the main content area of the component. It acts as a container for component content.
<p>:
This HTML paragraph element displays markup information. The content of the paragraph is dynamically generated using Vue expressions JSON.stringify(marker,null,2). It uses this JSON.stringify()function to convert the marker prop into a formatted JSON string with an indent of 2 spaces.
This is just a placeholder for the information you wish to form and display for the user to see the marker they just clicked
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-declaration-color)">template</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><ion-content</span> <span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"><p></span><span style="color:var(--syntax-string-color)">{
{</span><span style="color:var(--syntax-name-color)">JSON</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">stringify</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">marker</span><span style="color:var(--syntax-text-color)">,</span><span style="color:var(--syntax-declaration-color)">null</span><span style="color:var(--syntax-text-color)">,</span><span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}}</span><span style="color:var(--syntax-error-color)"></p></span>
<span style="color:var(--syntax-error-color)"></ion-content></span>
<span style="color:var(--syntax-error-color)"></</span><span style="color:var(--syntax-declaration-color)">template</span><span style="color:var(--syntax-error-color)">></span>
</code></span></span>Script section:
The script section contains the logic and functionality of the component. Let's take a look:
Imports:
We import all the Ionic components required by this component from the @ionic/vue package. This component is used in template sections to represent content areas.
Props and Emits Declaration:
This component defines two parts: propsand emits. Props allow us to pass data into components, while emits allow us to fire custom events.
In this case, the component expects a prop called , which contains an markerobject with and properties.coordinatetitle
The emits section declares an event named onDismiss.
<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">script</span> <span style="color:var(--syntax-name-color)">setup</span> <span style="color:var(--syntax-name-color)">lang</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">ts</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">IonContent</span><span style="color:var(--syntax-text-color)">,</span>
<span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">@ionic/vue</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-comment-color)">// PROPS</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">props</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">defineProps</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-name-color)">marker</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">coordinate</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">any</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-text-color)">title</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">string</span> <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>
<span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">emits</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">defineEmits</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-text-color)">{</span>
<span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onDismiss</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-declaration-color)">void</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">();</span>
</code></span></span>Summary:
In this section, we examine the code of a Vue component that displays markup information. Template sections JSON.stringify()render markup data using expressions. The script section defines props and emits declarations.
You can use this component to display markup information in your Vue application. Customize template sections as needed to achieve the desired layout and style.
in conclusion:
In this blog post, we examine the code of a custom map component built using Vue, Ionic Capacitor, and Google Maps .
By understanding this code, you now have the foundation for building a Vue mobile application that integrates with Ionic Capacitor and Google Maps. You can further customize components by adding additional functionality or styling to meet your specific needs.
Remember to properly configure your API key in the function createMapto ensure that the Google Maps plugin works properly. Also, feel free to explore the Ionic Capacitor and Google Maps documentation for more advanced features and functionality.