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