こんにちわ、開発者のⅠです。
今朝、JRのある路線で遅延が発生していたようですが、その原因が猪と衝突したことによる車両不具合だったそうです……どれだけ強い衝撃だったのでしょうか。
さて、今回は前回の投稿の続きです。
前回紹介したGoogle Maps APIには、様々な種類があります。
var optionの中のプロパティを説明しますと、以下の通りです。
※なお、①「zoom」と②「center」は必須です。この２つを指定しないとマップが表示できません！！
いかがでしょうか？
地図の仕様ですが、公式ページとほぼ同等です。
これをさらにカスタマイズすることも可能ですが、それについては次回お話したいと思います。
---------------------------------------------------------------------------------
＊追記 (11月19日)＊
今朝、JRのある路線で遅延が発生していたようですが、その原因が猪と衝突したことによる車両不具合だったそうです……どれだけ強い衝撃だったのでしょうか。
さて、今回は前回の投稿の続きです。
前回紹介したGoogle Maps APIには、様々な種類があります。
- Google Maps Android API
- Google Maps SDK for iOS
- Google Maps JavaScript API
- Google Places API for Android
- Google Places API for iOS
- Google Maps Roads API
- Google Static Maps API
- Google Street View Image API
- Google Maps Embed API
- Google Places API Web Service
- Google Maps Geocoding API
- Google Maps Directions API
- Google Maps Distance Matrix API
- Google Maps Geolocation API
- Google Maps Elevation API
- Google Maps Time Zone API
今回はその中の「Google Maps JavaScript API」を利用する場合について、お話したいと思います。
まず、マップを表示させたいページのheaderに以下のタグを追加してください。
これを追加することで、APIのライブラリを読み込みます。
次に、JavaScriptを記述します。まずはプレーンな地図を表示してみましょう。
google.maps.event.addDomListener(window, 'load', function () {
var map = document.getElementById("map_canvas");
var options = {
zoom: 11,
center: new google.maps.LatLng(35.360667, 138.727775),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(map, options);
});
① zoom = "ズーム(拡大)値"の初期値、大きいほど拡大されて表示されます
② center = "マップの中心座標(緯度, 経度)"の初期値、この座標を中心としてマップが表示されます
③ mapTypeId = "表示するマップの様式"を指定します。今回は"ROADMAP(=２D地図)"を指定しています。
② center = "マップの中心座標(緯度, 経度)"の初期値、この座標を中心としてマップが表示されます
③ mapTypeId = "表示するマップの様式"を指定します。今回は"ROADMAP(=２D地図)"を指定しています。
※なお、①「zoom」と②「center」は必須です。この２つを指定しないとマップが表示できません！！
いかがでしょうか？
地図の仕様ですが、公式ページとほぼ同等です。
これをさらにカスタマイズすることも可能ですが、それについては次回お話したいと思います。
---------------------------------------------------------------------------------
＊追記 (11月19日)＊
コメント欄よりご指摘を受けまして、ここに追記させていただきます。
上記の内容に加えて、HTMLのbody内に以下のdivタグを加えてください。
これがマップを実際に表示させる場所となります。
つまりは、必須の要素です！
こんなに大事な内容をお伝えできていなかったこと、申し訳ありませんでした……。
また、コメントを下さったsystem kgさんに感謝いたします。
上記の内容に加えて、HTMLのbody内に以下のdivタグを加えてください。
これがマップを実際に表示させる場所となります。
つまりは、必須の要素です！
こんなに大事な内容をお伝えできていなかったこと、申し訳ありませんでした……。
また、コメントを下さったsystem kgさんに感謝いたします。