Thanks for reading my question :)
I'm trying to implement GoogleMaps in my Vue.js project and using the @googlemaps/js-api-loader (from https://developers.google.com/maps/documentation/javascript/overview#javascript)
My Code looks as follows:
<script setup>
import { onMounted, ref } from 'vue'
import { Loader } from '@googlemaps/js-api-loader'
const loader = new Loader({
apiKey: '',
version: 'weekly',
libraries: ['places']
})
const map = ref([])
onMounted(async () => {
await loader
.load()
.then(google => {
map.value = google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
})
})
.catch(error => {
console.log(error)
})
.then(function () {
// always executed
})
})
</script>
<template>
<div
id="map"
class="map"
/>
</template>
<style>
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
But the map isn't showing, only that pop-up window, that the map can't load properly.
In the console this error occurs:
typeError: this.set is not a function. (In 'this.set("renderingType","UNINITIALIZED")', 'this.set' is undefined)
Does anyone know how to get it running (at best in the <script setup>)?
Try to add new like this :
map.value = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
})
try this too if it didn't work:
map.value = new window.google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});