今回はGoogleMapsApiを使ってGoogleMapを表示させます。

ルーティングの設定

ログインボタンを押したら “/MemoryMap/public/displayMap” のリクエストを発行します。

MemoryMap/routes/web.php に以下を追加し、上記リクエストでコントローラーの “displayMap”メソッドを動かします。

Route::get('/displayMap', 'MemoryMapController@displayMap');

MemoryMap/app/Http/Controllers/MemoryMapController.php に以下を追加し、”displayMap”ビューを返却します。

// Map画面を返却する
　public function displayMap(){
  return view('displayMap');
}

ブレードの作成とGoogleMapの表示

MemoryMap/resources/views/displayMap.blade.php は以下の通りにしています。

今回はとりあえず地図を表示させるだけです。

<!DOCTYPE HTML>
<HTML>

<HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <TITLE>思い出ＭＡＰ</TITLE>
    <style>
        .map {
            width:500px;
            height:500px;
        }
    </style>
</HEAD>

<BODY>

    <div id="map" class="map"></div>

    <script async        
　　　　src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initMap">
　　</script>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 35.681236, lng: 139.767125 },
                zoom: 10
            });
        };
    </script>

</BODY>

</HTML>

<script>タグにasync属性を追加することで、非同期に JS ファイルをダウンロード・実行します。

src=”https://maps.googleapis.com/maps/api/js?key=[APIKEY]　でGoogleMapのAPIを読込んでいます。

callback関数でinitMapメソッドを呼び出しています。

initMapメソッドの中でcenterで中心地を、zoomで拡大率を設定しています。

styleで幅と高さを指定しないと表示されないので要注意です。

ログインボタンを押すと以下の様にGoogleMapが表示される画面に遷移します。

GoogleMapにマーカーを設置

少し手を加えて、Mapにマーカーを表示させるためにinitMapメソッドに以下を追加します。

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 35.681236, lng: 139.767125 },
                zoom: 10
            });

            marker = new google.maps.Marker({ 
            position: { lat: 35.681236, lng: 139.767125 }, 
            map: map 
            });
        };

以下の様にマーカーが表示されます。

ブレイドとCSSの設定

地図を表示する画面のレイアウトを整えます。

ナビゲーションを追加してみました。またcssを読込むようにしています

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="">登録</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=[APIKEY]&callback=initMap"></script>

    <script>

        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 35.681236, lng: 139.767125 },
                zoom: 10
            });
             
            marker = new google.maps.Marker({ 
            position: { lat: 35.681236, lng: 139.767125 }, 
            map: map 
            });
        };

    </script>

</BODY>

</HTML>

Larabelではcssはpublicフォルダ配下に配置します。

MemoryMap/public/css/displayMap.css

.head_title{
 font-size: 24px;
 font-weight: bold;
}

span{
 color:red;
}

nav{
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 margin-bottom: 10px;
}
nav ul{
 display: table;
 margin: 0 auto;
 padding: 0;
 width: 80%;
 text-align: center;
}
nav ul li{
 display: table-cell;
 min-width: 50px;
 border-right: 1px solid #ccc;
}
nav ul li:first-child{
 border-left: 1px solid #ccc;
}
nav ul li a{
 display: block;
 width: 100%;
 padding: 10px 0;
 text-decoration: none;
 color: #aaa;
}
nav ul li a:hover{
 background-color:#F8E750;
}
nav ul li.current{
 font-weight: bold;
}
nav ul li.current a{
 border-bottom: 5px solid #00B0F0;
 color: #00B0F0;
}

.map {
    max-width: 90%; 
    height:300px;
    margin: 0 auto;
}

以下の様な見た目になります。

今後は自分で登録した場所にマーカーを表示したり、情報ウインドウを表示できるようにしていきます。

次回から登録画面の作成に入ります。