laravel 5.5でgoogle maps javascript api を使ってcontrollerからviewのjsへ値(緯度経度)を渡して、その値を使ったgoogle mapをviewに表示させることをやりたいのですが、htmlにjsを(scriptタグで囲って)直接書くときちんとマップが表示されるのですが、jsを別ファイルに書いて読み込ませると真っ白になります。
まずコントローラでviewにjsonデータを渡しています。
MicropostsController.php
php
1public function show($id) 2 { 3 $user = \Auth::user(); 4 $micropost = Micropost::find($id); 5 $json_micropost = $micropost->toJson(); 6 7 8 return view('microposts.show', ['json_micropost'=>$json_micropost]); 9 }
jsは別ファイルにして読み込んでいます
show.blade.php
html
1@extends('layouts.app') 2 3@section('content') 4 5<div id="show_map" style="width: 100%; height: 370px; margin-bottom: 30px;"></div> 6 7<script src="{{ secure_asset('/js/gmap/show_map.js') }}"></script> 8<script src="https://maps.googleapis.com/maps/api/js?key={{config('app.GOOGLE_MAPS_KEY')}}&callback=show_map" async defer></script> 9 10@endsection
中身はこんな感じです。
public/js/gmap/show_map.js
javascript
1function show_map() { 2 let lat = JSON.parse(@json($json_micropost))['map_lat']; 3 let lng = JSON.parse(@json($json_micropost))['map_lng']; 4 5 console.log(lat, lng); 6 let location = {lat:lat, lng: lng}; 7 let options = { zoom: 10, center: location, disableDoubleClickZoom: true }; 8 let map = new google.maps.Map(document.getElementById('show_map'), options); 9 let marker=new google.maps.Marker({position: location,map: map,}); 10}
これを別ファイルから読み込んだときのみエラー
Uncaught SyntaxError: Invalid or unexpected token show_map.js:2 と
c.apply is not a function
がでます。二行目がいけないとのことなので、ためしに以下のように数値を入れるとうまく表示されました。
c.applyとはなんのことかわかりませんでした。
javascript
1// let lat = JSON.parse(@json($json_micropost))['map_lat']; 2 // let lng = JSON.parse(@json($json_micropost))['map_lng']; 3 let lat = 35; 4 let lng = 140;
HTMLのヘッダーに書いてあるCDNの読み込み順も疑ってみましたが良さそうでした。
app.blade.php
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 7 8 <title>xxxxxxxx</title> 9 10 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 11 <link rel="stylesheet" type="text/css" href="{{ secure_asset('css/main.css') }}" media="all"> 12 13 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 14 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> 15 <!--<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>--> 16 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 17 </head> 18 <body> 19 @include('commons.navbar') 20 <div class="container"> 21 @include('commons.error_messages') 22 @yield('content') 23 </div> 24 </body> 25</html>
なので
javascript
1JSON.parse(@json($json_micropost))
の部分がだめそうです。
エディターのアラートには
json is not defined; please fix or add /global json/
$json_micropost is not defined; please fix or add /global $json_micropost/
とありました。
なので$json_micropostのスコープ?が別ファイルまで届いていないということかなと思い、一度viewファイルに$json_micropostを呼び出してみようと思い以下のようにかきましたが、表示は真っ白でした。
show.blade.php
php
1<?php $json_micropost ?> 2
どのようにしたらjsを別ファイルにしてもうまくいくでしょうか? なにぶん初心者なもので、そのあたりをご考慮の上ご教授お願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。