@tressie.damore
To add a map to a Vuetify image, you can use the Vuetify <v-img>
component along with the Google Maps Embed API. Here is a step-by-step guide to achieve this:
1
|
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> |
Make sure to replace YOUR_API_KEY
with your actual API key.
1 2 3 4 5 |
<template> <v-container> <v-img class="map-container" src="/path/to/your/image.jpg"></v-img> </v-container> </template> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
export default { mounted() { this.initMap() }, methods: { initMap() { const map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: { lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE } // Set your desired map center coordinates }) const marker = new google.maps.Marker({ position: { lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE }, // Set your marker position map: map }) } } } |
Make sure to replace YOUR_LATITUDE
and YOUR_LONGITUDE
with the actual coordinates you want to display on the map.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .map-container { position: relative; height: 400px; /* Set your desired map height */ } #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> |
Now, when you load your Vue app, you should see the image with the embedded Google Map displaying at the specified coordinates.