新人日誌2
- 2019年2月06日
- 他の話題
Webページ上にGoogleマップを表示してみましょう。
まず、JavascriptAPIを利用するためにAPIKeyを取得します。
https://developers.google.com/maps/documentation/javascript/get-api-key
を参考にして取得、有効化します。
html内body要素にdiv要素を作ります。
bodyのスタイルheightとdivのスタイルheightに100%を指定します。
このdivにgoogleマップを表示します。
divに分かりやすいように map というidをつけましょう。
先ほど作ったdivの終わりにGoogleマップを表示するためのjavascriptを書きます。
関数の名前は initMap とします。
function initMap() {
var mapPosition = { lat: 35.170662, lng: 136.923430 };
var mapArea = document.getElementById(‘max_shop_search_maps’);
var mapOptions = {
center: mapPosition,
zoom: 16,
mapTypeControl: true, //マップタイプ コントロール
fullscreenControl: false, //全画面表示コントロール
streetViewControl: false, //ストリートビュー コントロール
zoomControl: false, //ズーム コントロール
};
//マップを生成するMapクラス
var gmap = new google.maps.Map(mapArea, mapOptions);
}
・ mapPositionは表示した際の初期中心位置
var mapPosition = { lat:/*任意の緯度*/, lng:/*任意の経度*/ };
・mapAreaは先ほど作ったdivのidを指定します。
var mapArea = document.getElementById(‘map’);
・mapOptionsに表示する際のオプションを書きます。
var mapOptions = {
center: mapPosition,
zoom: 16,
mapTypeControl: false, //マップタイプ コントロール
fullscreenControl: false, //全画面表示コントロール
streetViewControl: false, //ストリートビュー コントロール
zoomControl: false, //ズーム コントロール
};
・center に mapPositionに入れた初期中心位置を設定
・zoom に拡大度を設定
・~~Controlは地図上に表示されるコントロールボタンの表示設定です。
(Trueで表示、falseで非表示)
最後に
gmap = new google.maps.Map(mapArea, mapOptions)
でマップを作成し変数gmapに保持しておきます。
次にgoogleマップAPIライブラリを読み込むために
<script src=“http://maps.googleapis.com/maps/api/js?key={ApiKey}&callback=initMap”async></script>
・key={取得してきたAPIKey}
・callback={先ほど作成したマップを表示するためのinitMap}
とします。
gmapにアクセスして表示座標を操作することができます。
水曜担当:Tanaka
tanaka at 2019年02月06日 10:00:39