I have a solution, you don't need to use ref for reactive, instead use shallowref, triggerref and markraw, i created a composable with all the google maps options, please test it, i'm from chile so sorry but i use spanish but you can understand the logic, google maps can't create advanced markers if the propierties are reactive.
import { shallowRef, onUnmounted, triggerRef, markRaw } from 'vue';
export default function useMapaComposable() {
// ✅ Estado del mapa - usar shallowRef para objetos externos
const mapa = shallowRef(null);
const googleMaps = shallowRef(null);
const isLoaded = shallowRef(false);
const isLoading = shallowRef(false);
// Colecciones de elementos del mapa - usando shallowRef para Maps
const marcadores = shallowRef(new Map());
const polilineas = shallowRef(new Map());
const circulos = shallowRef(new Map());
const poligonos = shallowRef(new Map());
const infoWindows = shallowRef(new Map());
const listeners = shallowRef(new Map());
/**
* Cargar la API de Google Maps con loading=async
*/
const cargarGoogleMapsAPI = apiToken => {
return new Promise((resolve, reject) => {
// Si ya está cargado, resolver inmediatamente
if (window.google && window.google.maps) {
// ✅ Usar markRaw para evitar reactividad profunda
googleMaps.value = markRaw(window.google.maps);
isLoaded.value = true;
resolve(window.google.maps);
return;
}
// Si ya está en proceso de carga, esperar
if (isLoading.value) {
const checkLoaded = setInterval(() => {
if (isLoaded.value) {
clearInterval(checkLoaded);
resolve(window.google.maps);
}
}, 100);
return;
}
isLoading.value = true;
// Crear callback global único
const callbackName = `__googleMapsCallback_${Date.now()}`;
window[callbackName] = () => {
// ✅ Usar markRaw para evitar reactividad profunda
googleMaps.value = markRaw(window.google.maps);
isLoaded.value = true;
isLoading.value = false;
// Limpiar callback
delete window[callbackName];
resolve(window.google.maps);
};
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiToken}&libraries=marker,places,geometry&loading=async&callback=${callbackName}`;
script.async = true;
script.defer = true;
script.onerror = () => {
isLoading.value = false;
delete window[callbackName];
reject(new Error('Error al cargar Google Maps API'));
};
document.head.appendChild(script);
});
};
/**
* Inicializar el mapa
*/
const inicializarMapa = async (apiToken, divElement, opciones = {}) => {
try {
await cargarGoogleMapsAPI(apiToken);
const opcionesDefault = {
center: { lat: -33.4489, lng: -70.6693 },
zoom: 12,
mapTypeId: googleMaps.value.MapTypeId.ROADMAP,
streetViewControl: true,
mapTypeControl: true,
fullscreenControl: true,
zoomControl: true,
gestureHandling: 'greedy',
backgroundColor: '#e5e3df',
...opciones,
};
if (!opcionesDefault.mapId) {
console.warn(
'⚠️ No se proporcionó mapId. Los marcadores avanzados no funcionarán.'
);
}
// ✅ Crear el mapa y marcarlo como no reactivo
const mapaInstance = new googleMaps.value.Map(
divElement,
opcionesDefault
);
mapa.value = markRaw(mapaInstance);
// Esperar a que el mapa esté completamente renderizado
await new Promise(resolve => {
googleMaps.value.event.addListenerOnce(
mapa.value,
'tilesloaded',
resolve
);
});
// Agregar delay adicional para asegurar renderizado completo
await new Promise(resolve => setTimeout(resolve, 300));
// Forzar resize para asegurar que todo esté visible
googleMaps.value.event.trigger(mapa.value, 'resize');
// Recentrar después del resize
mapa.value.setCenter(opcionesDefault.center);
console.log('✅ Mapa completamente inicializado y listo');
return mapa.value;
} catch (error) {
console.error('Error al inicializar el mapa:', error);
throw error;
}
};
// ==================== MARCADORES ====================
const crearMarcador = (id, opciones = {}) => {
if (!mapa.value || !googleMaps.value) {
console.error('El mapa no está inicializado');
return null;
}
const opcionesDefault = {
position: { lat: -33.4489, lng: -70.6693 },
map: mapa.value,
title: '',
draggable: false,
animation: null,
icon: null,
label: null,
...opciones,
};
// ✅ Marcar el marcador como no reactivo
const marcador = markRaw(new googleMaps.value.Marker(opcionesDefault));
marcadores.value.set(id, marcador);
triggerRef(marcadores);
return marcador;
};
const crearMarcadorAvanzado = async (id, opciones = {}) => {
if (!mapa.value || !googleMaps.value) {
console.error('❌ El mapa no está inicializado');
return null;
}
const mapId = mapa.value.get('mapId');
if (!mapId) {
console.error(
'❌ Error: Se requiere un mapId para crear marcadores avanzados'
);
console.error('💡 Solución: Pasa mapId al inicializar el mapa');
return null;
}
try {
// Importar las librerías necesarias
const { AdvancedMarkerElement, PinElement } =
await googleMaps.value.importLibrary('marker');
const { pinConfig, ...opcionesLimpias } = opciones;
// Configurar opciones por defecto
const opcionesDefault = {
map: mapa.value, // ✅ Ahora funciona porque mapa es markRaw
position: { lat: -33.4489, lng: -70.6693 },
title: '',
gmpDraggable: false,
...opcionesLimpias,
};
// Si no se proporciona contenido personalizado, crear un PinElement
if (!opcionesDefault.content) {
const pinConfigDefault = {
background: '#EA4335',
borderColor: '#FFFFFF',
glyphColor: '#FFFFFF',
scale: 1.5,
...pinConfig,
};
const pin = new PinElement(pinConfigDefault);
opcionesDefault.content = pin.element;
}
// ✅ Crear el marcador y marcarlo como no reactivo
const marcador = markRaw(new AdvancedMarkerElement(opcionesDefault));
// Guardar referencia
marcadores.value.set(id, marcador);
triggerRef(marcadores);
console.log('✅ Marcador avanzado creado:', id, opcionesDefault.position);
return marcador;
} catch (error) {
console.error('❌ Error al crear marcador avanzado:', error);
console.error('📝 Detalles:', error.message);
return null;
}
};
const obtenerMarcador = id => {
return marcadores.value.get(id);
};
const eliminarMarcador = id => {
const marcador = marcadores.value.get(id);
if (!marcador) {
return false;
}
// Limpiar listeners
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
triggerRef(listeners);
}
// Remover del mapa
if (marcador.setMap) {
marcador.setMap(null);
}
// Para marcadores avanzados
if (marcador.map !== undefined) {
marcador.map = null;
}
// Eliminar referencia y forzar reactividad
marcadores.value.delete(id);
triggerRef(marcadores);
return true;
};
const eliminarTodosMarcadores = () => {
marcadores.value.forEach((marcador, id) => {
// Limpiar listeners
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
}
// Remover del mapa
if (marcador.setMap) {
marcador.setMap(null);
}
// Para marcadores avanzados
if (marcador.map !== undefined) {
marcador.map = null;
}
});
// Limpiar colecciones
marcadores.value.clear();
listeners.value.clear();
// Forzar reactividad
triggerRef(marcadores);
triggerRef(listeners);
};
const animarMarcador = (id, animacion = 'BOUNCE') => {
const marcador = marcadores.value.get(id);
if (marcador && marcador.setAnimation) {
const animationType =
animacion === 'BOUNCE'
? googleMaps.value.Animation.BOUNCE
: googleMaps.value.Animation.DROP;
marcador.setAnimation(animationType);
if (animacion === 'BOUNCE') {
setTimeout(() => {
if (marcadores.value.has(id)) {
marcador.setAnimation(null);
}
}, 2000);
}
}
};
// ==================== POLILÍNEAS ====================
const crearPolilinea = (id, coordenadas, opciones = {}) => {
if (!mapa.value || !googleMaps.value) {
console.error('El mapa no está inicializado');
return null;
}
const opcionesDefault = {
path: coordenadas,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: mapa.value,
...opciones,
};
// ✅ Marcar como no reactivo
const polilinea = markRaw(new googleMaps.value.Polyline(opcionesDefault));
polilineas.value.set(id, polilinea);
triggerRef(polilineas);
return polilinea;
};
const actualizarPolilinea = (id, coordenadas) => {
const polilinea = polilineas.value.get(id);
if (polilinea) {
polilinea.setPath(coordenadas);
return true;
}
return false;
};
const obtenerPolilinea = id => {
return polilineas.value.get(id);
};
const eliminarPolilinea = id => {
const polilinea = polilineas.value.get(id);
if (!polilinea) {
return false;
}
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
triggerRef(listeners);
}
polilinea.setMap(null);
polilineas.value.delete(id);
triggerRef(polilineas);
return true;
};
const eliminarTodasPolilineas = () => {
polilineas.value.forEach((polilinea, id) => {
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
}
polilinea.setMap(null);
});
polilineas.value.clear();
listeners.value.clear();
triggerRef(polilineas);
triggerRef(listeners);
};
// ==================== CÍRCULOS ====================
const crearCirculo = (id, opciones = {}) => {
if (!mapa.value || !googleMaps.value) {
console.error('El mapa no está inicializado');
return null;
}
const opcionesDefault = {
center: { lat: -33.4489, lng: -70.6693 },
radius: 1000,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: mapa.value,
editable: false,
draggable: false,
...opciones,
};
// ✅ Marcar como no reactivo
const circulo = markRaw(new googleMaps.value.Circle(opcionesDefault));
circulos.value.set(id, circulo);
triggerRef(circulos);
return circulo;
};
const obtenerCirculo = id => {
return circulos.value.get(id);
};
const eliminarCirculo = id => {
const circulo = circulos.value.get(id);
if (!circulo) {
return false;
}
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
triggerRef(listeners);
}
circulo.setMap(null);
circulos.value.delete(id);
triggerRef(circulos);
return true;
};
const eliminarTodosCirculos = () => {
circulos.value.forEach((circulo, id) => {
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
}
circulo.setMap(null);
});
circulos.value.clear();
listeners.value.clear();
triggerRef(circulos);
triggerRef(listeners);
};
// ==================== POLÍGONOS ====================
const crearPoligono = (id, coordenadas, opciones = {}) => {
if (!mapa.value || !googleMaps.value) {
console.error('El mapa no está inicializado');
return null;
}
const opcionesDefault = {
paths: coordenadas,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: mapa.value,
editable: false,
draggable: false,
...opciones,
};
// ✅ Marcar como no reactivo
const poligono = markRaw(new googleMaps.value.Polygon(opcionesDefault));
poligonos.value.set(id, poligono);
triggerRef(poligonos);
return poligono;
};
const obtenerPoligono = id => {
return poligonos.value.get(id);
};
const eliminarPoligono = id => {
const poligono = poligonos.value.get(id);
if (!poligono) {
return false;
}
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
triggerRef(listeners);
}
poligono.setMap(null);
poligonos.value.delete(id);
triggerRef(poligonos);
return true;
};
const eliminarTodosPoligonos = () => {
poligonos.value.forEach((poligono, id) => {
const elementListeners = listeners.value.get(id);
if (elementListeners) {
elementListeners.forEach(listener => {
googleMaps.value.event.removeListener(listener);
});
listeners.value.delete(id);
}
poligono.setMap(null);
});
poligonos.value.clear();
listeners.value.clear();
triggerRef(poligonos);
triggerRef(listeners);
};
// ==================== INFO WINDOWS ====================
const crearInfoWindow = (id, opciones = {}) => {
if (!googleMaps.value) {
console.error('Google Maps no está cargado');
return null;
}
const opcionesDefault = {
content: '',
position: null,
maxWidth: 300,
...opciones,
};
// ✅ Marcar como no reactivo
const infoWindow = markRaw(
new googleMaps.value.InfoWindow(opcionesDefault)
);
infoWindows.value.set(id, infoWindow);
triggerRef(infoWindows);
return infoWindow;
};
const abrirInfoWindow = (infoWindowId, marcadorId) => {
const infoWindow = infoWindows.value.get(infoWindowId);
const marcador = marcadores.value.get(marcadorId);
if (infoWindow && marcador && mapa.value) {
infoWindow.open({
anchor: marcador,
map: mapa.value,
});
return true;
}
return false;
};
const cerrarInfoWindow = id => {
const infoWindow = infoWindows.value.get(id);
if (infoWindow) {
infoWindow.close();
return true;
}
return false;
};
const eliminarInfoWindow = id => {
const infoWindow = infoWindows.value.get(id);
if (!infoWindow) {
return false;
}
infoWindow.close();
infoWindows.value.delete(id);
triggerRef(infoWindows);
return true;
};
const eliminarTodosInfoWindows = () => {
infoWindows.value.forEach(infoWindow => {
infoWindow.close();
});
infoWindows.value.clear();
triggerRef(infoWindows);
};
// ==================== UTILIDADES ====================
const centrarMapa = (lat, lng, zoom = null) => {
if (mapa.value) {
mapa.value.setCenter({ lat, lng });
if (zoom !== null) {
mapa.value.setZoom(zoom);
}
}
};
const ajustarALimites = coordenadas => {
if (!mapa.value || !googleMaps.value || coordenadas.length === 0) {
return;
}
const bounds = new googleMaps.value.LatLngBounds();
coordenadas.forEach(coord => {
bounds.extend(coord);
});
mapa.value.fitBounds(bounds);
};
const cambiarTipoMapa = tipo => {
if (mapa.value && googleMaps.value) {
const tipos = {
roadmap: googleMaps.value.MapTypeId.ROADMAP,
satellite: googleMaps.value.MapTypeId.SATELLITE,
hybrid: googleMaps.value.MapTypeId.HYBRID,
terrain: googleMaps.value.MapTypeId.TERRAIN,
};
mapa.value.setMapTypeId(tipos[tipo] || tipos.roadmap);
}
};
const obtenerCentro = () => {
if (mapa.value) {
const center = mapa.value.getCenter();
return {
lat: center.lat(),
lng: center.lng(),
};
}
return null;
};
const obtenerZoom = () => {
return mapa.value ? mapa.value.getZoom() : null;
};
const agregarListener = (tipo, callback) => {
if (mapa.value && googleMaps.value) {
return googleMaps.value.event.addListener(mapa.value, tipo, callback);
}
return null;
};
const agregarListenerMarcador = (marcadorId, tipo, callback) => {
const marcador = marcadores.value.get(marcadorId);
if (marcador && googleMaps.value) {
const listener = googleMaps.value.event.addListener(
marcador,
tipo,
callback
);
if (!listeners.value.has(marcadorId)) {
listeners.value.set(marcadorId, []);
}
listeners.value.get(marcadorId).push(listener);
return listener;
}
return null;
};
const calcularDistancia = (origen, destino) => {
if (!googleMaps.value || !googleMaps.value.geometry) {
console.error('Geometry library no está cargada');
return null;
}
const puntoOrigen = new googleMaps.value.LatLng(origen.lat, origen.lng);
const puntoDestino = new googleMaps.value.LatLng(destino.lat, destino.lng);
return googleMaps.value.geometry.spherical.computeDistanceBetween(
puntoOrigen,
puntoDestino
);
};
const limpiarMapa = () => {
eliminarTodosMarcadores();
eliminarTodasPolilineas();
eliminarTodosCirculos();
eliminarTodosPoligonos();
eliminarTodosInfoWindows();
// Limpiar listeners restantes
listeners.value.forEach(listener => {
if (Array.isArray(listener)) {
listener.forEach(l => {
if (googleMaps.value && googleMaps.value.event) {
googleMaps.value.event.removeListener(l);
}
});
}
});
listeners.value.clear();
triggerRef(listeners);
};
const destruirMapa = () => {
limpiarMapa();
mapa.value = null;
};
onUnmounted(() => {
destruirMapa();
});
return {
mapa,
googleMaps,
isLoaded,
isLoading,
inicializarMapa,
crearMarcador,
crearMarcadorAvanzado,
obtenerMarcador,
eliminarMarcador,
eliminarTodosMarcadores,
animarMarcador,
crearPolilinea,
actualizarPolilinea,
obtenerPolilinea,
eliminarPolilinea,
eliminarTodasPolilineas,
crearCirculo,
obtenerCirculo,
eliminarCirculo,
eliminarTodosCirculos,
crearPoligono,
obtenerPoligono,
eliminarPoligono,
eliminarTodosPoligonos,
crearInfoWindow,
abrirInfoWindow,
cerrarInfoWindow,
eliminarInfoWindow,
eliminarTodosInfoWindows,
centrarMapa,
ajustarALimites,
cambiarTipoMapa,
obtenerCentro,
obtenerZoom,
agregarListener,
agregarListenerMarcador,
calcularDistancia,
limpiarMapa,
destruirMapa,
marcadores,
polilineas,
circulos,
poligonos,
infoWindows,
};
}
