こんにちは！インターン10月生のニシグチです！
今は図書館サイトを作っているのですが、私はその中にアクセスマップを設置しています。
そこでページ内にgooglemapを設置してしまおうということで、今日は私が実践した設置方法を書こうと思っています。
訓練校で制作したページでも、googlemapを入れていたのですが、やはり何通りかやり方があるようで、最初はなかなかうまく表示されない…なんてこともありました。
その中で、これが割と簡単で、カスタマイズしやすいのではないかという方法です。
HTMLとCSSの設定
まず、マップを表示させる領域として、HTMLに
<div id=”map”>
</div>
と書きます。(id名は適当でOK)
そして表示する領域をCSSで指定します。
#map {width: 500px;
height: 500px;}
これを指定していないと、マップは表示されないので注意です。
そして次に、<body>にonload=”initialize();”を追加し、
<body onload=”initialize();”>
</body>
としておきます。
JavaScriptの記述
<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?sensor=false”></script>
まずこちらをhead内に記述し、googlemapと繋ぎます。
そして次に、
<script type=”text/javascript”>
function initialize() {
var latlng = new google.maps.LatLng(34.6817554,135.4846481);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“Map”), myOptions);
}
</script>
こちらをhead内に記述します。
とりあえずこれをコピペすれば地図は表示されます。
そして、上記のscript内で赤文字にしている部分。こちらをとりあえずは変更していきます。
最初の数字が並んでいる部分(34.6817554,135.4846481)、こちらが緯度と経度を表しています。
これを取得するには、まずgooglemapで場所を検索し、この場所についてなどで調べると出てきます。
この画面の下や、アドレスバーなんかにも書いています。
ちなみにこの座標は阿波座です。
そして次に、zoom: 15,と書いてある数値を調整して、表示倍率を調整します。
最後の赤文字部分(“Map”)は表示する場所を指定しています。
最初に書いたdivのid名ですね。
というワケでいかがでしたでしょうか？簡単にgooglemapを表示させる方法でした。
ささっと付けて、アイコンなどをいじったりしない場合には良いんじゃないでしょうか？
それでは今日はこの辺で失礼します。
ニシグチ