Estoy trabajando en mi primera aplicación Svelte que incluye un mapa de Google integrado.

Configurar Google Maps con Svelte 3 proporcionó un buen punto de partida para crear un componente que carga un mapa de Google de forma asíncrona. Sin embargo, no puedo averiguar cómo acceder al objeto del map fuera de la llamada onMount inicial, y sin acceso a ese objeto no puedo agregar la funcionalidad que quiero (por ejemplo, volver a centrar el mapa en función de un botón que el usuario clics).

main.js

 import App from './App.svelte'; const app = new App({ target: document.body, props: { ready: false, } }); window.initMap = function ready() { app.$set({ ready: true }); } export default app;

App.svelte

 <script> import Map from './Map.svelte'; export let ready; </script> <svelte:head> <script defer async src="https://maps.googleapis.com/maps/api/js?key={}&callback=initMap"></script> </svelte:head> { #if ready } <Map></Map> { /if }

Map.svelte

 <script> // Imports import { onMount } from 'svelte'; // Globals let map; let container; // Load the map async onMount(async () => { map = new google.maps.Map(container, { zoom: 6, center: { lat: 0, lng: 0 }, }); }); // This function has no access to the `map` variable created above!! function recenterMap() { map.setCenter({lat: 1, lng: 1}); } </script> <div class="full-screen" bind:this={container}></div> <button on:click="{recenterMap}"></button>

Ejecutar lo anterior genera un error al intentar invocar la llamada a setCenter en un objeto que no existe. He buscado cómo otros marcos (React, Vue) podrían manejar esto, pero las soluciones son específicas para los marcos y no se aplican aquí.

¡Cualquier ayuda sería muy apreciada!