質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

Laravel8でGoogle Map APIを使用した際にresourses/js/result.jsをlaravel-mixで使用するとエラーが出る件について

Maruco2321
Maruco2321

総合スコア110

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

217閲覧

投稿2022/03/23 21:47

編集2022/04/24 14:53

MacOSで

PHP 7.4.1
Laravel 8.75
を使用しています。Laravel8でMaps JavaScript API(Google Map API)を使用した際にresourses/js/result.jsをlaravel-mixで使用するとエラーが出てしまいました。この前段階として
public/js/result.jsにJSを記述し、laravel-mixを使わないで試したところうまく行っていたので次にlaravel-mixを使用してresourses/js/result.js内の関数をviewで読み込もうという考えでした。

コード (プロジェクト名) ├─ resourses │ ├─ js │ │ └─ result.js(これをlaravel-mixで) │ └─ app.js │ ├─ views │ └─ welcome.blade.php(表示画面) │ ├─ public │ └─ js/result.js(成功後、resourses/jsにコピーして消去) │ │

public/js/result.jsの場合のweb上での画面
イメージ説明

welcome.blade.php

コード <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> Where is Tokyo Tower ? </head> <body> <div id="map" style="height:500px"> </div> {{-- <script src="{{ asset('/js/result.js') }}"></script> --}} <script src="{{ mix('js/result.js') }}" defer></script> <script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key={{ env('GCP_API')}}&callback=initMap" async defer> </script> </body> </html>

webpack-mix.js

コード const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .js('resources/js/result.js', 'public/js') .version();

resourses/js/result.js

コード // googleMapsAPIを持ってくるときに,callback=initMapと記述しているため、initMap関数を作成 function initMap() { // welcome.blade.phpで描画領域を設定するときに、id=mapとしたため、その領域を取得し、mapに格納します。 map = document.getElementById("map"); // 東京タワーの緯度は35.6585769,経度は139.7454506と事前に調べておいた let tokyoTower = {lat: 35.6585769, lng: 139.7454506}; // オプションを設定 opt = { zoom: 13, //地図の縮尺を指定 center: tokyoTower, //センターを東京タワーに指定 }; // 地図のインスタンスを作成します。第一引数にはマップを描画する領域、第二引数にはオプションを指定 mapObj = new google.maps.Map(map, opt); marker = new google.maps.Marker({ // ピンを差す位置を決めます。 position: tokyoTower, // ピンを差すマップを決めます。 map: mapObj, // ホバーしたときに「tokyotower」と表示されるようにします。 title: 'tokyotower', }); }

エラーは

コード 127.0.0.1/:1 Uncaught (in promise) ne {message: 'initMap is not a function', name: 'InvalidValueError', stack: 'Error\n at new ne (https://maps.googleapis.com/m…r7EqxPk&callback=initMap:197:124'} message: "initMap is not a function" name: "InvalidValueError" stack: "Error\n at new ne (https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=AIztPk&callback=initMap:66:280)\n at Object._.pe (https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=AIH_8MztPk&callback=initMap:66:391)\n at Bea (https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=AzaPk&callback=initMap:197:241)\n at https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=APk&callback=initMap:197:124" [[Prototype]]: Error
initMap is not a functionだったり、 welcome.blade.phpの方では <script src="https://maps.googleapis.com&region=JP&key={{ env('GCP_API')}}&callback=initMap" async defer> なのに initMap:197:124' のような:197:124'が何故かついている

ことから、うまくlaravel-mixが機能していないと思われます。ですが、具体的な原因がわからないでいます。よろしくお願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。