Q&A
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件
0
ベストアンサー
@json($json_micropost)はBlade/PHPなのでJSファイルに書いても絶対に動かない。
PHPとJSの違いをしっかり理解するのはLaravel前に必要な基礎知識。
解決策1
mapくらいならJSファイルに分けずそのままBladeに書いていい。
解決策2
BladeにPHPが必要な部分だけ書いて
<script> let lat = JSON.parse(@json($json_micropost))['map_lat']; let lng = JSON.parse(@json($json_micropost))['map_lng']; </script>
残りをJSファイルで読み込む。
この場合BladeにあるJSの変数とJSファイルの繋がりを記録しておかないと後から見た時に分かりにくい。
たぶん本人でさえ忘れる。
投稿2020/11/11 11:58
総合スコア10377
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。