Google Maps JavaScript APIを使って、マップをWebページに埋め込む方法

こんにちわ、開発者のⅠです。
今朝、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);
 });

var optionの中のプロパティを説明しますと、以下の通りです。

① zoom =　"ズーム(拡大)値"の初期値、大きいほど拡大されて表示されます

② center = "マップの中心座標(緯度, 経度)"の初期値、この座標を中心としてマップが表示されます

③ mapTypeId = "表示するマップの様式"を指定します。今回は"ROADMAP(=２D地図)"を指定しています。

※なお、①「zoom」と②「center」は必須です。この２つを指定しないとマップが表示できません！！

いかがでしょうか？
地図の仕様ですが、公式ページとほぼ同等です。

これをさらにカスタマイズすることも可能ですが、それについては次回お話したいと思います。


---------------------------------------------------------------------------------

＊追記　(11月19日)＊

コメント欄よりご指摘を受けまして、ここに追記させていただきます。

上記の内容に加えて、HTMLのbody内に以下のdivタグを加えてください。

これがマップを実際に表示させる場所となります。
つまりは、必須の要素です！
こんなに大事な内容をお伝えできていなかったこと、申し訳ありませんでした……。
また、コメントを下さったsystem kgさんに感謝いたします。

Read More