I've been trying to initialize a Google map on my vue.js project while including the script :
<script src="https://maps.googleapis.com/maps/api/js?key="MY_API_KEY"&callback=initMap" async defer></script>
The problem is that my .vue files look like that :
<template> ... </template> <script> ... </script>
And I can't include more than one script tag in my vue file, I can show the map while passing by the index.html but I dont really want to put js on the index.html, + I can't point the script callback on a vue method.
Do you guys have some ideas on how to show up that map using a .vue file ? I did use vue2-google-maps but I'd like to use the original google map.
I have a fiddle which is doing something ok : https://jsfiddle.net/okubdoqa/ without using a callback in the script tag, but it doesnt work for me ... Thanks
We can use JavaScript maps and sets as reactive properties in Vue.
Google Maps can be integrated totally free to any app.
The Maps JavaScript API uses a pay-as-you-go pricing model. Maps JavaScript API requests generate calls to two different SKUs depending on the type of request: map loads or panoramas.
Go to the Google Maps Platform > Credentials page. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
I'd suggest using npm google-maps instead of adding a script in index.html. You might not need to call google-maps API in every pages, and I'd say it's better to use Webpack properly. You can use 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 }) }) }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With