外出記録を登録する画面を作ります。

GoogleMapにマーカーを表示するためには緯度と経度の登録が必要なので、場所の名前から逆引きできるようにGoogleMapsApiのGeocoding機能を使用します。

ルーティングの設定

MemoryMap/routes/web.php

 Route::get('/torokuGamen', 'MemoryMapController@torokuGamen

MemoryMap/app/Http/Controllers/MemoryMapController.php

     // 登録画面を返却する
     public function torokuGamen(){
        return view('torokuGamen');
    }

GoogleMapsApiのGeocoding機能

MemoryMap/resources/views/insertInfo.blade.php

<!DOCTYPE HTML>
<HTML>

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

<BODY>

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

    <div class="container">
        <div class="inline">

            <h3>登録して下さい</h3>
            <form>
                <p class="label">出かけた場所</p>
                <input placeholder="例)東京スカイツリー" id="name" class="in" /><br>

                <input type="button" onClick="attrLatLngFromAddress()" value="検索する" class="btn2">

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

                <p class="label">緯度</p>
                <input placeholder="緯度" id="ido" class="in" /><br>

                <p class="label">経度</p>
                <input placeholder="経度" id="keido" class="in" /><br>

                <p class="label">コメント</p>
                <input placeholder="コメントを記入して下さい" id="com" class="in" /><br>

                <p class="label">出かけた日</p>
                <input type="date" id="date" class="in" /><br>

                <p class="label">写真</p>
                <input type="file" name="file" id="file" class="in" /><br>

                <input type="submit" value="送信" class="btn">

            </form>

        </div>
    </div>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initMap"></script>
    <script>
        var map;
        var marker = [];

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 35.658593, lng: 139.745441 },
                zoom: 15
            });
        }

        function attrLatLngFromAddress() {
            var address = document.getElementById("name").value;
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();
                    // 取得した緯度・経度を画面の項目にセット
                    document.getElementById("ido").value = (lat);
                    document.getElementById("keido").value = (lng);
                    //マーカーを配置
                    markerLatLng = { lat: lat, lng: lng };
                    marker = new google.maps.Marker({
                        position: markerLatLng,
                        map: map
                    })
                    //検索した場所に移動
                    map.panTo(new google.maps.LatLng(lat, lng));

                } else {
                    alert("検索に失敗しました");
                }
            });
        }

    </script>

</BODY>

</HTML>

ジオコーディングの説明です。

attrLatLngFromAddressメソッドを作成し、検索ボタンのイベントで発火させるようにしています。

ジオコーダーのオブジェクトを作成します。

var geocoder = new google.maps.Geocoder();

geocodeメソッドを実行します。リクエストが完了すると、callback関数に結果(GeocoderResultオブジェクト)とステータス(GeocoderStatusクラス)が渡されます。

geocoder.geocode({ 'address': address }, function (results, status) {

ジオコーディングが成功したかどうかは、ステータスが「OK」になっているかどうかで判定できます。

if (status == google.maps.GeocoderStatus.OK) {

ジオコーディングした結果の緯度・経度を取得します。

var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();

画面の項目にセットします。

document.getElementById("ido").value = (lat);
document.getElementById("keido").value = (lng);  

マップのマーカーの位置を指定し、マップの中心地も取得した座標に移動させます。

//マーカーを配置
markerLatLng = { lat: lat, lng: lng };
marker = new google.maps.Marker({
    position: markerLatLng,
    map: map
})
//検索した場所に移動
map.panTo(new google.maps.LatLng(lat, lng));

ジオコーディングが失敗した場合はアラートを表示させます。

} else {
 alert("検索に失敗しました");

MemoryMap/public/css/insertInfo.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;
}

.container{
 width:100%;
 margin-bottom:10px;
}

.inline{
 text-align: center;
}

h3{
 background-color:ghostwhite;
 border-bottom: solid 3px #ffc107;
 padding:10px;
 margin: auto;
 margin-bottom: 20px;
 width: 40%;
}

.label {
  font-weight: bold;
  text-align: left;
  margin:10px auto;
  width:30%;
  padding: 0.25em ;
  color: #494949;
  background: transparent;
  border-left: solid 5px #ffc107;
}

.in{
 width:28%;
 padding:15px;
 margin-bottom:5px;
 border: solid 1px;
 border-radius: 5px;
}

.btn{
  margin-top:20px;
  position: relative;
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;
  border: solid 2px #d27d00;
  width: 100px;
}

.btn2{
  margin-top:10px;
  margin-bottom:10px;
  position: relative;
  display: inline-block;
  padding: 7px;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
  font-weight: bold;
  border: solid 2px #d27d00;
  width: 100px;
}

.map-outer{

 width:100%; 
 height:100%;
}

.map{
 margin:auto;
 width:400px; 
 height:200px;
}

見た目はこんな感じです。

場所を入力して「検索する」ボタンを押すと、緯度経度がセットされます。

失敗するとアラートが表示されます。

登録画面は出来たので次はデータベースとサーバー側の登録処理を作成します。