3月21日 - hinairo’s diary

html作成

○imgを全てimgフォルダからの相対パスに変更。

○メニュー欄のimgが見本サイトに比べると白く明るかったので空divを作り黒のフィルターをかける為、background-colorを黒にして、opacityで透けさせてフィルターを作り、position:absoluteとtop・left位置指定。

f:id:hinairo:20210321201916p:plain

○イベント告知欄

・colの幅変更

・予約作成ボタン作成

<a href="#" class="btn btn-big"><span class="texture"></span><span>Make a Reservation</span></a>
</div>

f:id:hinairo:20210321202812p:plain

○Googlemap表示

GoogleAPI取得

qiita.com

サイト手順通に進めていってhtmlブラウザに反映したが、全く表示され無い。

なぜだろうと思い、よくみてみると、headタグ内のJSコードに取得したAPIキーを

入力していなかった。入力してみたところ、次は一瞬映ったが、すぐに消えてエラー。

先生に聞いたところ、基本的にはサーバー上でしか動かないとのこと。

一旦サーバーにアップしてURLから開いてみたが、やっぱりマップはエラー。

やり方が違うのかなと思いつつ、コードをもう一度確認してみたところ、テンプレートのコードに[APIキー]と書いてあったところの[]を残したままにしていたのが原因だった。削除したところ、反映できた。

headタグ内
!-- googlemap -->
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBhplwLmSIcEsAfLK2ewP40_
Odva8cKVHE&language=ja"></script>//文中apiキー入力

<div class="col-12">
 
 
文中
<div id="map"></div>
</div>
 
 
body閉じタグすぐ上
<script>

var MyLatLng = new google.maps.LatLng(34.944917, 135.813681); //座標
var Options = {
zoom: 15, //地図の縮尺値
center: MyLatLng, //地図の中心座標
mapTypeId: 'roadmap' //地図の種類
 };
var map = new google.maps.Map(document.getElementById('map'), Options);
var marker = new google.maps.Marker({
position: MyLatLng,
map: map,
title: "Hello smile"
 });
 