Google Maps Script doesnt render Maps

[jamie3]

🐛 The bug

I've followed the instructions to install Nuxt Scripts here https://scripts.nuxt.com/docs/getting-started/installation

Afterwards I followed the instructions to install Google Maps Script in my vue app.

<script setup>
const isLoaded = ref(false);
const center = ref();
const maps = ref();

const query = ref({
  lat: -37.7995487,
  lng: 144.9867841,
});

const markers = ref([]);

let increment = 1;
function addMarker() {
  // push to markers, we want to add a marker from the center but randomize the position by a bit
  const _center = center.value || query.value;
  // lat and lng may be a function
  const _lat = typeof _center.lat === "function" ? _center.lat() : _center.lat;
  const _lng = typeof _center.lng === "function" ? _center.lng() : _center.lng;
  const lat = (1000 * _lat + increment) / 1000;
  const lng = (1000 * _lng + increment) / 1000;
  increment += 1;

  markers.value.push(`${lat},${lng}`);
}

function removeMarkers() {
  markers.value = [];
  increment = 1;
}
function handleReady({ map }) {
  center.value = map.value.getCenter();
  map.value.addListener("center_changed", () => {
    center.value = map.value.getCenter();
  });
  isLoaded.value = true;
}
</script>
<template>
  <ScriptGoogleMaps
    ref="maps"
    api-key="AIzaSyAizkRBWxmQGYXOIUD3QtxrcEr63EKyxe4"
    class="group"
    above-the-fold
  />
</template>

I ran yarn dev

The http server starts http://localhost:3000. When opening in the browser it shows the map but it is blank/gray. I don't see any JS errors/logs or errors/logs in the nuxt server.

I confirmed that my API key has permissions to use the required APIs.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-pkwfkx?file=README.md

🌈 Expected behavior

Maps should appear

ℹ️ Additional context

[harlan-zw]

Hi, as far as I can tell this is because you haven't given the map anywhere to open on, you must either have a top-level center or configure the mapOptions.

See https://stackblitz.com/edit/nuxt-starter-uz9rzi?file=pages%2Findex.vue

I've updated the docs to hopefully make this clearer.