× 無料のユーザー登録をすると学習状況を管理することができるようになります

Google Maps API入門 (全19回)

Google Maps APIを使ってさまざまな地図を表示、操作する方法を学びます。

#01 ひな形ファイルを作ろう
2016年2月14日
レッスン収録時点では sensor パラメータが必要でしたが、現在では不要となっています。

https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

つけたままでも不具合にはつながりませんが、公式ドキュメントでは取り除くことが推奨されています。
2012年1月17日
このレッスンを学習するにはJavaScriptの基礎知識が必要となります。詳しくは以下からどうぞ。
http://dotinstall.com/lessons/basic_javascript
2016年2月14日
マップ領域を100%に指定したい場合、
html, body {
  height:100%;
}
を指定するようにしましょう。
2012年1月17日
Google Maps JavaScript APIの公式ドキュメントはこちらからどうぞ。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/
#02 最初の地図を表示させよう
2012年1月18日
英語では南北の緯度のことをlatitude、東西の経度のことをlongitudeと言うので、Google Maps APIでは「latlng」という表現がしばしば利用されています。
2012年1月17日
APIリファレンスはこちらからどうぞ。ほぼすべての情報がこちらに網羅されています。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html
#03 地図のオプションを変更する
2013年9月9日
ユーザーの方からご指摘がありましたが、動画中に登場する MapOptions オブジェクトの navigationControl プロパティはすでに廃止されています。

最新のドキュメントは英語版で公開されていますので、こちらをご覧下さい。
英語版のほうが随時最新の内容に更新されています。
http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html

レッスン作成時に日本語で公開されていた Google Maps API の API リファレンスは2010年6月15日版とかなり古いものでした。

2012年2月28日時点でも日本語版は2011年6月8日版のドキュメントが掲載されています。

なお、ドキュメントから消えたオプションでもエラーが出ないのは、その機能を利用しているサイトで Google Maps が動作しなくなることを防ぐために、しばらくの期間 Google が実装を残しているためだと思われます。
2012年1月21日
地図のオプションについては以下の公式ドキュメントに詳しいです。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#MapOptions
#04 マーカーを表示する
2012年1月21日
マーカーを作成する際のオプションや設定できるイベントなどはこちらを参考にしてみてください。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#Marker
#06 マーカーのオプションを変更する
2012年1月17日
Markerが取り得るオプションについては以下が詳しいです。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#MarkerOptions
#07 情報ウィンドウを表示する
2012年1月21日
以下の公式リファレンスにもありますが、情報ウィンドウのcontentには(1)普通の文字列、(2)HTMLタグを含む文字列、(3)HTML要素を含めることができます。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#InfoWindow

(3)のHTML要素を含めるにはたとえば次のように指定します(idにmemoを指定した要素を情報ウィンドウに表示します)。
content: document.getElementById('memo'),
#08 マーカーと情報ウィンドウの連動
2012年1月21日
getCenter()以外にも便利なメソッドがたくさんあります。詳しくは以下からどうぞ。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#Map
#09 住所から緯度経度を算出する (1)
2012年1月18日
GeocoderStatusにはOK以外にもいくつかのステータスがあります。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#GeocoderStatus
2012年1月18日
Geocoderクラスのリファレンスはこちらです。
http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#Geocoder
geocodeメソッドが2つの引数をとり、第2引数のコールバック関数にも2つの引数をとることが書かれています。
#13 クリック位置の住所を表示する (3)
2012年1月21日
GeocoderResult のプロパティである formatted_address は現在日本語のドキュメントには記載されていませんので、以下の英語ドキュメントをご覧ください。
http://code.google.com/intl/en/apis/maps/documentation/javascript/reference.html#GeocoderResult

このように Google の API 群では、日本語ドキュメントが最新版になっていないことがよくありますので、最新の情報を調べる際には英語版ドキュメントを見る癖をつけておくと、何かと役立ちます。
#16 住所を入力して地図を移動させる (3)
2012年1月25日
panTo() を使うと、移動先の地点がすでに地図上で表示されている場合には、地図がスムーズに移動してくれます。
#17 現在地の地図を表示する (1)
2012年1月17日
主にFirefoxでの挙動ですが、geolocationについてはこちらのドキュメントが詳しいです。
https://developer.mozilla.org/ja/Using_geolocation