Centermarker disappears when loading active googlemap

[jlemonz]

📚 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.

<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 have you tried?

No response

ℹ️ Additional context

No response