When using the code, I get a center marker on the coordinates I want on the static map view, but as soon as the map gets active it disappears. The demo code in the docs, I don't see how it works since api is no longer worker.
<script setup lang="ts">
import { ref } from "vue";
import { useRuntimeConfig } from "#app";
const config = useRuntimeConfig();
const googleMapsApiKey = config.public.googleMapsApiKey;
const leidenCoords = { lat: 52.160114, lng: 4.49701 }; // Coordinates for Leiden
const mapOptions = {
zoom: 10, // Set the initial zoom level
center: { lat: 52.160114, lng: 4.49701 }, // Initial center position
mapTypeControl: false, // Disables Map/Satellite option
streetViewControl: false, // Disables Street View pegman
fullscreenControl: false, // Disables fullscreen option
scrollwheel: false, // Disables scroll wheel zoom
styles: [
{
featureType: "landscape",
stylers: [{ color: "#f9ddc5" }, { lightness: -7 }],
},
{
featureType: "road",
stylers: [{ color: "#813033" }, { lightness: 43 }],
},
{
featureType: "poi.business",
stylers: [{ color: "#645c20" }, { lightness: 38 }],
},
{
featureType: "water",
stylers: [
{ color: "#1994bf" },
{ saturation: -69 },
{ gamma: 0.99 },
{ lightness: 43 },
],
},
{
featureType: "road.local",
elementType: "geometry.fill",
stylers: [
{ color: "#f19f53" },
{ weight: 1.3 },
{ visibility: "on" },
{ lightness: 16 },
],
},
{ featureType: "poi.business" },
{
featureType: "poi.park",
stylers: [{ color: "#645c20" }, { lightness: 39 }],
},
{
featureType: "poi.school",
stylers: [{ color: "#a95521" }, { lightness: 35 }],
},
{
featureType: "poi.medical",
elementType: "geometry.fill",
stylers: [
{ color: "#813033" },
{ lightness: 38 },
{ visibility: "off" },
],
},
],
}; // Function to add the Leiden marker when map is ready
</script>
<template>
<div class="flex items-center justify-center w-full min-w-full">
<ScriptGoogleMaps
:api-key="googleMapsApiKey"
:mapOptions="mapOptions"
class="h-64 rounded-lg min-w-full"
/>
</div>
</template>
<style scoped>
/* Optional styling */
</style>
<style scoped>
/* Ensure map has full width and fixed height */
#map {
width: 100%;
height: 16rem; /* 64 Tailwind units */
}
</style>
📚 What are you trying to do?
When using the code, I get a center marker on the coordinates I want on the static map view, but as soon as the map gets active it disappears. The demo code in the docs, I don't see how it works since api is no longer worker.
🔍 What have you tried?
No response
ℹ️ Additional context
No response