登録画面で登録した外出先をGoogleMapに表示させます。今回はピンを表示するところまで実装します。

DBからデータを取得する（クエリビルダを使用）

DBからデータを取得し、画面に渡します。クエリビルダのget

MemoryMap/app/Http/Controllers/MemoryMapController.php

use App\gaishutsu_kiroku;     
     // Map画面を返却する
     public function displayMap(){
     
        //インスタンス化
        $data = gaishutsu_kiroku::get();

　　　　 //viewファイルに情報を渡す
        return view('displayMap', ['data' => $data]);
    }

useでモデルを指定してるので [モデル]::get の記載でDBの中身を全量取得できます。

今後は条件指定で取得する様にしますが今回は全量取得します。

return view(‘displayMap’, [‘data’ => $data]);　と書くことで、
「data」という変数名で displayMapView に取得したデータを渡すことができます。

Googlemapに複数マーカーを表示

googlemapに複数のマーカーを表示します。

MemoryMap/resources/views/displayMap.blade.php

<!DOCTYPE HTML>
<HTML>

<HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <TITLE>思い出ＭＡＰ</TITLE>
    <link rel="stylesheet" type="text/css" href="css/displayMap.css" media="all">
</HEAD>

<BODY>

     <header>
        <p class="head_title">思い出<span>ＭＡＰ</span></p>
        <nav>
            <ul>
                <li><a href="/MemoryMap/public/displayMap">ＭＡＰ</a></li>
                <li><a href="/MemoryMap/public/torokuGamen">登録</a></li>
                <li><a href="">一覧</a></li>
            </ul>
        </nav>
    </header>

    <div id="map" class="map"></div>
    <script async
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0jk-vadOR5ZWLZjhSrCzK_J2McxzbqNM&callback=initMap"></script>

    <script>
        
        var map;
        
        <!-- コントローラーから渡された$dataを取得 -->
        var data = @json($data);
        
        <!-- マーカーを複数置くため配列で定義 -->
        var marker = [];

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 35.681236, lng: 139.767125 },
                zoom: 12
            });
            
            <!-- 取得したデータのレコード数分処理を繰り返す -->
            for (var i = 0; i < data.length; i++) {

              <!-- マーカーを置く緯度・経度にDBの値をセットする -->
              markerLatLng = {lat: data[i]['ido'], lng: data[i]['keido']}; 
              marker[i] = new google.maps.Marker({ 
              position: markerLatLng, 
              map: map 
              });
            }
        };

    </script>

</BODY>

</HTML>

以下の記載でコントローラーから渡ってきたデータを data に格納してviewで使用できるようにします。

var data = @json($data);

繰り返し文で取得したレコード分処理を繰り返します。

for (var i = 0; i < data.length; i++) {

data[i][‘カラム名’]でレコードの値を取得できます。

DBの [‘ido’] [‘keido’] の値を取得してマーカーの表示場所を指定します。

markerLatLng = {lat: data[i]['ido'], lng: data[i]['keido']}; 
marker[i] = new google.maps.Marker({ 
position: markerLatLng, 
map: map

実際に動かします。現在はマーカーが３つ表示されています。

登録画面から出かけた場所を追加します。

Mapの表示画面に戻ると、マーカーが追加されました。

次回はマーカーに情報ウインドウを追加します。