新人日誌2

Webページ上にGoogleマップを表示してみましょう。

まず、JavascriptAPIを利用するためにAPIKeyを取得します。

https://developers.google.com/maps/documentation/javascript/get-api-key

を参考にして取得、有効化します。

htmlbody要素にdiv要素を作ります。

bodyのスタイルheightdivのスタイルheight100%を指定します。

このdivgoogleマップを表示します。

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は先ほど作ったdividを指定します。

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



アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム