How to add a map to a vuetify image?
How to add a map to a vuetify image?
1 answer
by
elisha_langworth ,
2 months ago
@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:
- First, ensure you have a Google Maps Embed API key. You can obtain one by following the instructions on the Google Maps Embed API documentation.
- Install the Google Maps Embed API script in your HTML file:
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.
- Add the
1 2 3 4 5 |
<template>
<v-container>
<v-img class="map-container" src="/path/to/your/image.jpg"></v-img>
</v-container>
</template>
|
- Add a method to initialize the Google Maps Embed API with your API key and set the map location:
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.
- Style the map container by adding the following CSS:
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.