外出記録を登録する画面を作ります。
GoogleMapにマーカーを表示するためには緯度と経度の登録が必要なので、場所の名前から逆引きできるようにGoogleMapsApiのGeocoding機能を使用します。
ルーティングの設定
MemoryMap/routes/web.php
Route::get('/torokuGamen', 'MemoryMapController@torokuGamenMemoryMap/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>思い出ＭＡＰ</TITLE>
<link rel="stylesheet" type="text/css" href="css/insertInfo.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/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;
}見た目はこんな感じです。
場所を入力して「検索する」ボタンを押すと、緯度経度がセットされます。
失敗するとアラートが表示されます。
登録画面は出来たので次はデータベースとサーバー側の登録処理を作成します。