2017-05-10 1 views
1

私の期待通りに私のVueJS/LaravelアプリケーションがGoogleMapsに正しく読み込まれません。なぜコールバックが呼び出されないのかわかりません。この関数は使用可能であり、ロードする必要があります。手伝って頂けますか?私は間違いを見つけません。私は初期段階でconsol.logしか持っていないので、まだ地図を見ることを期待していませんが、これは呼び出されません。完全なGoogle URLを開いたときのエラーメッセージは次のとおりです。GoogleMaps無効なコールバックパラメータ

Google Maps APIサーバーがあなたのリクエストを拒否しました。無効なリクエスト。 'コールバック'パラメータが無効です。

<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> 

メイン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;} 

答えて

1

変更

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

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

して、あなたのAPIキーがKEYではないことを確認してください;)

唯一の変化は外へasyncdeferを動かしていますAPIのURL