Siéntete libre de compartir nuestra web y códigos en tus redes sociales, ayúdanos a hacer crecer esta comunidad.
Solución:
Sugeriría usar npm google-maps en lugar de agregar un script en index.html. Es posible que no necesite llamar a la API de Google Maps en todas las páginas, y yo diría que es mejor usar Webpack correctamente. Puedes usar npm install google-maps
import GoogleMapsLoader from 'google-maps'
mounted: function ()
GoogleMapsLoader.load(function(google)
let map = new google.maps.Map(document.getElementById('map'),
zoom: 15,
center: position
)
)
Es un poco complicado hacer que esto funcione sin usar una biblioteca, y probablemente hay formas más limpias, pero simplemente puede importar la biblioteca y usarla en sus componentes si desea comenzar a funcionar.
Primero, no use el defer Y async opciones en el
Luego, en su componente puede acceder al global google y pasarle un elemento una vez que el componente esté configurado. Por ejemplo, usando la configuración de la cli de Vuejs:
msg
Estaba buscando un problema diferente y encontré este, hay otra forma de lograrlo sin tener que agregarlo index.html.
Enfrenté un problema similar en el que tuve que usar dos API de Google keys para diferentes entornos, por lo que la codificación es rígida para index.html no fue una buena idea, hice esto si ayuda a alguien -
main.js
export const loadedGoogleMapsAPI = new Promise( (resolve,reject) =>
window['GoogleMapsInit'] = resolve;
let GMap = document.createElement('script');
GMap.setAttribute('src',
`https://maps.googleapis.com/maps/api/js?key=$process.env.GOOGLE_API_KEY&callback=GoogleMapsInit®ion=IN`);
document.body.appendChild(GMap);
);
MapaElem.vue
Es bastante sencillo, escribe una Promesa en main.js que se resolverá en la devolución de llamada iniciada por el script de Google (que agregamos dinámicamente al cuerpo). Una vez que se resuelve la Promesa, puede acceder al objeto de mapa en su componente.
Reseñas y puntuaciones
Nos puedes añadir valor a nuestra información añadiendo tu experiencia en las acotaciones.
