赤字部分にAPIキーの文字列が表示されます。基本は、APIを取り込み、JavaScriptでエリアを取得して、設定用の連想配列を作成し、マップオブジェクトをHTMLのタグに紐づける形で組込みます。APIで「東京駅」周辺のマップを表示する例です。<APIキー>はご自身のAPIキーの文字列に置き換えてください。settings);</script></body></html>コードの書き方コード量が多いので書きながら解説していきます。ステップ1:HTMLコードを記述まずはHTMLコードを記述します。Test</title></head><body></body></html>ステップ2:マップを表示するタグを追加マップを表示するタグを追加します。style="height:300px;width:300px"></div></body></html>ステップ3:APIキーを指定したAPI取り込み用のscriptタグを追加APIキーを指定したAPI取り込み用のscriptタグを追加します。src="http://maps.google.com/maps/api/js?key=<APIキー>&language=ja"></script></body></html>ステップ4:マップロード用のscriptタグを追加マップロード用のscriptタグを追加します。src="http://maps.google.com/maps/api/js?key=<APIキー>&language=ja"></script><script></script></body></html>ステップ5:マップの初期設定用のコードを追加マップの初期設定用のコードを追加します。mapTypeId:'roadmap'};</script></body></html>設定オプションについて設定オプションについて説明します。centerマップの中央の位置をgoogle.maps.LatLngオブジェクトで指定します。LatLngは緯度と経度の略ですが、LatLngオブジェクトのコンストラクタの引数は緯度と経度です。緯度と経度はGoogleマップ上で「右クリック⇒この場所について」の操作で調べられます。zoomマップを表示する初期解像度は、zoomプロパティによって設定されます。値は0~21で指定します。値が小さいほど広範囲で値を大きくすると範囲が狭くなります。zoom:0は、地球が完全に縮小ズームされたマップに対応し、ズームレベルが大きいほど高解像度で拡大ズームされます。mapTypeIdマップのフォーマットを指定します。roadmapはノーマルなマップフォーマットになります。ステップ6:タグにマップを表示するコードを追加マップを表すJavaScriptクラスはMapクラスです。以下の赤字のようにしてdivタグにマップを表示するコードを追加します。settings);</script></body></html>これでサンプルのコードは完成です。APIで設定する方法を解説していきます。APIでデフォルトのマーカーを表示する例です。});</script></body></html>マーカーオブジェクトについてマーカーを設定するにはMarkerオブジェクトを作成します。positionオプションに緯度経度を設定したLatLngオブジェクトで位置を設定し、mapオプションにマーカーを表示するマップのMapオブジェクトを設定します。APIでオリジナルのマーカーを表示iconオプションを指定すれば、オリジナルのマーカーが表示できます。APIで吹き出し(情報ウィンドウ)を表示する方法InfoWindowオブジェクトを使用することで吹き出し(情報ウィンドウ)を表示することができます。以下はデフォルトの位置で吹き出し(情報ウィンドウ)を表示する例です。以下はpixelOffsetオプションを設定することで位置を調整して吹き出し(情報ウィンドウ)を表示することができます。マニュアルではブラウザのレンダリングを妨げない実装方法が推奨されていますので、それに合わせていきます。処理を関数化して、scriptタグの位置を変更し、scriptタグにasync指定とcallbackを追加して表示します。defersrc="http://maps.google.com/maps/api/js?key=<APIキー>&language=ja&callback=initMap"></script></body></html>APIの読み込みを非同期に最後にすることで、APIの実行が他の表示に影響を与えないで表示されます。APIで2地点間のルートを表示してみます。2地点をマーカー表示まずは2地点をマーカー表示してみます。defersrc="http://maps.google.com/maps/api/js?key=<APIキー>&language=ja&callback=initMap"></script></body></html>少々マップを大きくして、新宿駅のマーカーを追加しました。LatLngオブジェクトは連想配列の形式で代替できますのでその形式にしてみました。次にルート表示機能を追加してみます。defersrc="http://maps.google.com/maps/api/js?key=<APIキー>&language=ja&callback=initMap"></script></body></html>ルート表示と初期化の2つのボタンを追加して、ルート表示用の関数を追加しました。ロード時のイメージロード時のイメージです。ルート表示ボタン押下後のイメージルート表示ボタン押下後のイメージです。ルート表示方法について追記しました。マーカー、吹き出しについて追記しました。APIについて追記しました。/トレンド履歴スポンサーリンク関連サイト内検索ツールzealseedsおよび関連サイト内のページが検索できます。IPアドレス確認ツールあなたのグローバルIPアドレスは以下です。ランダムに組み合わせた文字列が表示されます。Loarding...。