CODEWITHSUNDEEP
javascriptphplaravelgoogle-maps
sesc360
sesc360

Reputation: 3255

GoogleMaps Invalid Callback Parameter

my VueJS/Laravel application does not load in GoogleMaps properly as I would expect. I dont understand why the callback is not called. The function is available and it should load. can you help me? I do not find my mistake. I dont expect to see the map yet as I only have a consol.log in the init, but even this is not called. The error message when I open the full google URL is:

The Google Maps API server rejected your request. Invalid request. Invalid 'callback' parameter.

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INSPINIA - @yield('title') </title>


    <link rel="stylesheet" href="{!! asset('css/vendor.css') !!}" />
    <link rel="stylesheet" href="{!! asset('css/app.css') !!}" />

</head>
<body>

  <!-- Wrapper-->
    <div id="wrapper">

        <!-- Navigation -->
        @include('layouts.navigation')

        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">

            <!-- Page wrapper -->
            @include('layouts.topnavbar')

            <!-- Main view  -->
            @yield('content')

            <!-- Footer -->
            @include('layouts.footer')

        </div>
        <!-- End page wrapper-->

    </div>
    <!-- End wrapper-->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
  <script src="{!! asset('js/app.js') !!}" type="text/javascript"></script>
  <script src="{!! asset('js/main.js') !!}" type="text/javascript"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>
@section('scripts')
@show

</body>
</html>

Main JS

const GISView = require('./components/GISView.vue');

window.Vue = Vue;
window.Event = new class {
  constructor() {
    this.Vue = new Vue();
  }

  fire(event, data = null) {
    this.Vue.$emit(event, data);
  }

  listen(event, callback) {
    this.Vue.$on(event, callback);
  }
};

var App = window.App = new Vue({
  el: '#app',
  components: {
    GISView: GISView
  },
  data: {},
  methods: {
    init: function() {
      console.log("OK");
    }
  }
});

GIS VUE

<template>
    <div id="map"></div>
</template>
<script>
    import GoogleMaps from '../mixins/GoogleMaps.js';

    export default {
        mixins: [GoogleMaps],
        data: {
            test: 1
        },
        mounted() {
            this.initMap();
        },
        methods: {
            initMap: function() {
                this.map = new google.maps.Map(document.getElementById('map'), {
                    center: { lat: 83.298, lng: 35.555},
                    scollwheel: false,
                    zoom: 4
                })
            }
        }
    }
</script>
#map {height:300px;width:500px;}

Upvotes: 1

Views: 1225

Answers (1)

fez
fez

Reputation: 665

Change 

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init async defer"></script>

To 

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places,geometry&callback=App.init" async defer ></script>

And please make sure your API key is not KEY ;)

The only change is moving the async and defer to outside of the API URL

Upvotes: 1

Related Questions