Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Integrating Google Maps in vue.js

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

like image 760
Loïc Monard Avatar asked Jun 19 '17 15:06

Loïc Monard


People also ask

Can you use map with Vue?

We can use JavaScript maps and sets as reactive properties in Vue.

Can you integrate with Google Maps?

Google Maps can be integrated totally free to any app.

Is Google map JS API free?

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.

How can I get Google map API key?

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.


1 Answers

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     })   }) } 
like image 87
j-printemps Avatar answered Sep 23 '22 04:09

j-printemps