Google Maps and Vue JS

I get this error:

Uncaught ReferenceError: google is not defined

Are you sure you have the google maps js file in your html?

<script src="https://maps.googleapis.com/maps/api/js?key=YourKey" async defer></script>

Needs to be included on the page. Preferably before your vue file or script

fetchAddress: function(address) {
new google.maps.Geocoder().geocode({ address: address }, function(results, status) {
                        if(status === google.maps.GeocoderStatus.OK) {
                var map = new google.maps.Map(document.getElementById('map'), {
                                center: results[0].geometry.location,
                                zoom: 14
                     });
            }
    },

Obviously replace/remove address stuff and add your code to center.

Now you are also missing in your code where you are loading it when the document is ready.

Usually:

ready: function() {
    this.fetchAddress({lat: -12.1430911, lng: -77.0227697});
},

@TortleWortle Yes, I'm 100% sure of that.

@jekinney Still not working =(

Any clues?

@pdellepiane

set a callback in your script call like so

<script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=FunctionName" async defer></script>

@TortleWortle Will it work even if I'm using VUE? O.o

I tried using this, and worked (But I really dont like that solution):

ready() {
     setTimeout(this.createMap, 100);
},

Seems like Google Maps loads before Vue. How do I run a Vue method after Google Maps loads?

Thanks in advance!

@pdellepiane ,

If you have this setup:

var App = new Vue({
    methods: {
        map: function()
        {
            //init etc
        }
    }
})

you can call the function as App.map() if ircc

<script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=App.map" async defer></script>

Also theres an awesome two part series on this website I recommend you watch them.

@TortleWortle Thanks for your reply, I have it like this:

main.js

var Vue = require('vue');
window.Vue = Vue;
Vue.use(require('vue-resource'));

import Map from './components/Map.vue';

var App = new Vue({
    el: 'body',
    
    components: {
        Map
    }
});

Map.vue

<template>
    <div id="map"></div>
</template>


<script>
    export default {
        data() {

        },
        
        create() {
            this.createMap();
        },

        methods: {
            createMap: function(){
                var map;

                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -12.1430911, lng: -77.0227697},
                    zoom: 12
                });
            }
        }
    };
</script>


<style lang="stylus">
    
</style>

How do I call the method "createMap" from outside Vue? And also, which series do you recomend? I've seen all of them related to Vue I think.

Watch this again from start to finish: https://laracasts.com/lessons/learning-the-google-maps-api

Jeffrey explains everything you need to know ;)

@bobbybouwmann Didnt see that! Thanks!

Still can't make it work, I dont know if I'm dumb or what! =(

@bobbybouwmann @TortleWortle So, this is what I'm doing:

Laravel View

<map></map>

<script src="{{ asset('assets/front/js/vue.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/front/js/main.js') }}" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=App.init"></script>

main.js

var Vue = require('vue');
window.Vue = Vue;

import Map from './components/Map.vue';

var App = new Vue({
    el: 'body',
    
    components: {
        Map
    },

    methods: {
        init: function(){
            this.$broadcast('MapsApiLoaded');
        }
    }
});

Map.vue

<template>
    <div>
        <h3>Map</h3>
        <div id="map"></div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                map: null
            };
        },

        events: {
            MapsApiLoaded: function(){
                this.createMap();
            }
        },

        methods: {
            createMap: function(){
                this.map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -12.1430911, lng: -77.0227697},
                    zoom: 12
                });
            }
        }
    };
</script>


<style lang="stylus">
    #map{
        with: 500px;
        height: 500px;
    }
</style>

What am I doing wrong?

Thanks guus!

This is the error I get:

Uncaught InvalidValueError: App.init is not a function

@pdellepiane Can you call App.init() via console?

@TortleWortle Theres something weird going on:

If I print App.init() at the end of main.js,

console.log( App.init() );

//It launches the function but, at the same time, in Chrome Console it says:

undefined

If I run App.init() in the Chrome Console, it returns:

Uncaught ReferenceError: App is not defined(…)
    (anonymous function) @ VM1173:2
    InjectedScript._evaluateOn @ VM1103:875
    InjectedScript._evaluateAndWrap @ VM1103:808
    InjectedScript.evaluate @ VM1103:664

Any ideas?

Are you loading in your js file correctly?

And how does your gulpfile look?

@TortleWortle I am loading my files correctly.

This is my gulpfile.js

var elixir = require('laravel-elixir');

require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.sass('app.scss','./public/assets/front/css');

    mix.browserify('main.js','./public/assets/front/js');
});

@TortleWortle I've tried this, and didn't work:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=startMap"></script>
<script type="text/javascript">
    function startMap(){
        alert("asd");
    }
</script>

Error:

Uncaught InvalidValueError: startMap is not a function

I don't know whats going on here!

@pdellepiane , try

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=startMap"></script>
<script type="text/javascript">
    function startMap(){
        alert("asd");
    }
</script>

@TortleWortle Now that worked, it launches the function. But if I do this:

function startMap(){
    App.init();
}

It says:

Uncaught ReferenceError: App is not defined

This is just crazy, don't know what to do :'(

@pdellepiane

what about window.App.init();

(I have no idea why this doesn't work so I'm just taking guesses now

@TortleWortle

Uncaught TypeError: Cannot read property 'init' of undefined

@JeffreyWay Sorry to bother you wit this, but its been more than 2 days that I'm trying to make this work, and haven't found a solution. Could you help me out? @TortleWortle can't make it work either.

@TortleWortle told me to use:

var App = window.App = new Vue({
    //code
});

Instead of:

var App = new Vue({
    //code
});

And suddenly it worked. I don't know why, but the good thing is that it worked.

Still, can anyone explain the reason?

https://ubilabs.github.io/geocomplete/ what about this package, is pretty easy and covers almost everything , cheers!

@pdellepiane I have the same problem and

var App = window.App = new Vue({ //code });

worked for me too...

Yes! Me too! Why is that so? Can anyone also please explain why?

Is it because the app new vue we defined in main.js is local variable?

I just passed out throughout this situation and this was my approach

https://gist.github.com/gocanto/0a99d0d9f3e0a15594c272887b07c8d1

This is coming a little late, but I struggled with this for some time and finally figured it out. I'm creating my Vue 2.0 project using webpack. I added this on index.html

You need to remove the callback at the end of the link so it doesn't call any function. Then on my Maps.Vue component I put the initMap function inside the methods: {} section and then to call the function when the page is ready I use the mounted hook. This is what my entire Maps.Vue file looks like.

  <div id="map"></div>

export default {
    data() {
        return {

        }
    },
    mounted: function() {
        this.initMap();
},
    methods: {
        initMap: function() {
            this.map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 83.9207, lng: 35.9565},
            scrollwheel: false,
            zoom: 4
            })
        }
    }
}

#map {height:300px;width:500px;}