05の01
サイト用のGoogle Maps APIキーを入手する
ウェブサイトにGoogleマップを追加する最も良い方法は、Google Maps APIを使用することです。 マップを使用するには、APIキーを取得することをおすすめします。
Google Maps API v3を使用するためにAPIキーを取得する必要はありませんが、使用状況を監視して追加のアクセス料を支払うことができるので非常に便利です。 Google Maps API v3の1日あたりのリクエスト数は1人あたり1件で、1日あたり最大25,000件に制限されています。 ページがこれらの制限を超える場合は、請求を有効にして詳細を取得する必要があります。
Google Maps APIキーを取得する方法
- Googleアカウントを使用してGoogleにログインします。
- Developers Consoleに移動します
- リストをスクロールしてGoogle Maps API v3を見つけ、[OFF]ボタンをクリックしてオンにします。
- 利用規約を読み、同意します。
- APIコンソールにアクセスし、左側のメニューから[APIアクセス]を選択します。
- 「Simple API Access」セクションで、「Create new Server key ...」ボタンをクリックします。
- WebサーバーのIPアドレスを入力します。 これは、マップリクエストの送信元となるIPです。 IPアドレスが分からない場合は、IPアドレスを調べることができます。
- 「APIキー：」行のテキストをコピーします（そのタイトルは含みません）。 これはマップのAPIキーです。
05の02
住所を座標に変換する
ウェブページでGoogleマップを使用するには、その場所の緯度と経度が必要です。 これらはGPSから取得することも、Geocoder.usのようなオンラインツールを使って伝えることもできます。
- Geocoder.usに移動し、検索ボックスに住所を入力します。
- 緯度の最初の数字をコピーして（手前の文字なし）、テキストファイルに貼り付けます。 度（°）インジケータは必要ありません。
- 経度の最初の番号をもう一度コピーして、テキストファイルに貼り付けます。
あなたの緯度と経度は次のようになります：
40.756076
-73.990838
Geocoder.usは米国の住所のみで動作します。他の国の座標を取得する必要がある場合は、地域の類似のツールを検索する必要があります。
03/05
Webページへのマップの追加
まず、マップスクリプトを
あなたの文書の
あなたのWebページを開き、あなたの文書のHEADに以下を追加してください。
強調表示された部分を、手順2で書き留めた緯度と経度に変更します。
第2に、マップ要素をページに追加する
すべてのスクリプト要素を文書のHEADに追加したら、ページ上にマップを配置する必要があります。 これを行うには、id = "map-canvas"属性を持つDIV要素を追加します。 私はあなたのページに収まる幅と高さでこのdivをスタイルすることをお勧めします：
最後に、アップロードとテスト
最後に行うのは、あなたのページをアップロードし、地図が表示されていることをテストすることです。 次に、ページ上のGoogleマップの例を示します。 About.com CMSの仕組みのため、リンクをクリックすると地図が表示されます。 これはあなたのページでは当てはまりません。
マップが表示されない場合は、BODY属性で初期化してみてください。
onload = "initialize（）" >
地図が読み込まれていないかどうかを確認するその他のもの：
- 大文字と小文字を含め、JavaScriptのタイプミスを探します。 JavaScriptは大文字と小文字を区別
- ズームと中央のオプションが設定されていることを確認してください。
- DIV要素が正しいIDのページにあることを確認します。
- あなたのDIV要素が高さを持っていることを確認してください。
04/05
マップにマーカーを追加する
しかし、人々にどこに行かなければならないかを示すマーカーがない場合、あなたの場所の地図は何が良いでしょうか？
標準のGoogleマップの赤いマーカーを追加するには、var map = ...の下のスクリプトに次の行を追加します。
var myLatlng = new google.maps.LatLng（ 緯度、経度 ）;
varマーカー=新しいgoogle.maps.Marker（{
ポジション：myLatlng、
地図：地図、
タイトル： " 元About.com本部 "
}）;
強調表示されたテキストを緯度と経度に変更し、人々がマーカーにカーソルを合わせたときに表示するタイトルを変更します。
あなたは好きなだけ多くのマーカーをページに追加することができます。新しい変数や新しい座標を追加するだけですが、地図が小さすぎてすべてのマーカーを表示できない場合は、リーダーがズームアウトしない限り表示されません。
var latlng 2 =新しいgoogle.maps.LatLng（ 37.3316591、-122.0301778 ）;
var myMarker 2 =新しいgoogle.maps.Marker（{
位置：latlng 2 、
地図：地図、
タイトル： " Apple Computer "
}）;
ここに、マーカーを持つGoogleマップの例を示します。 About.com CMSの仕組みのため、リンクをクリックして地図を表示する必要があります。 これはあなたのページでは当てはまりません。
05/05
あなたのページに2番目（またはそれ以上）の地図を追加する
私の例のGoogle mapsページを見てみたら、ページに複数の地図が表示されています。 これは非常に簡単です。 方法は次のとおりです。
- このチュートリアルの第2ステップで学習したすべてのマップの緯度と経度を取得します。
- このチュートリアルの手順3で学習した最初のマップを挿入します。 マップにマーカーを付ける場合は、手順4のようにマーカーを追加します。
- 2番目のマップでは、initialize（）スクリプトに3行の新しい行を追加する必要があります：
var latlng2 =新しいgoogle.maps.LatLng（ 2番目の座標 ）。
var myOptions2 = {ズーム：18、center：latlng2、mapTypeId：google.maps.MapTypeId.ROADMAP};
var map2 =新しいgoogle.maps.Map（document.getElementById（ "map_canvas_2"）、myOptions2）; - 新しいマップにマーカーを追加する場合は、2番目の座標と2番目のマップを指す2番目のマーカーを追加します。
var myMarker2 =新しいgoogle.maps.Marker（{position： latlng2 、map： map2 、title： " あなたのマーカータイトル "）; - 次に、2番目の
2番目のマップが必要な場所。 id = "map_canvas_2" IDを必ず付けてください。
- ページが読み込まれると、2つのマップが表示されます
ここに2つのGoogleマップがあるページのコードを示します。