サイト用の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キーです。
住所を座標に変換する
ウェブページでGoogleマップを使用するには、その場所の緯度と経度が必要です。これらはGPSから取得することも、Geocoder.usのようなオンラインツールを使って伝えることもできます。
- Geocoder.usに移動し、検索ボックスに住所を入力します。
- 緯度の最初の数字をコピーして（手前の文字なし）、テキストファイルに貼り付けます。度（°）インジケータは必要ありません。
- 経度の最初の番号をもう一度コピーして、テキストファイルに貼り付けます。
あなたの緯度と経度は次のようになります：
40.756076-73.990838
Geocoder.usは米国の住所でのみ動作します。他の国の座標を取得する必要がある場合は、地域内の同様のツールを検索する必要があります。
03/05Webページへのマップの追加
まず、マップスクリプトを
あなたの文書の
あなたのウェブページを開き、 頭 あなたの文書の
強調表示された部分を、手順2で書き留めた緯度と経度に変更します。
第2に、マップ要素をページに追加する
すべてのスクリプト要素を 頭 ページの上にマップを配置する必要があります。これを行うには、 DIV 要素と id = "map-canvas" 属性。私はあなたのページに収まる幅と高さでこのdivをスタイルすることをお勧めします：
最後に、アップロードとテスト
最後に行うのは、あなたのページをアップロードし、地図が表示されていることをテストすることです。次に、ページ上のGoogleマップの例を示します。 About.com CMSの仕組みのため、リンクをクリックすると地図が表示されます。これはあなたのページでは当てはまりません。
地図が表示されない場合は、 体 属性：
onload = "初期化（）" >
地図が読み込まれていないかどうかを確認するその他のもの：
- 大文字と小文字を含め、JavaScriptのタイプミスを探します。 JavaScriptは大文字と小文字を区別
- あなたが
ズームそしてセンターオプションが設定されます。 - あなたの
DIV要素が正しいIDでページにあります。 - あなたの
DIV要素は高さを持ちます。
マップにマーカーを追加する
しかし、人々にどこに行かなければならないかを示すマーカーがない場合、あなたの場所の地図は何が良いでしょうか？
標準のGoogleマップの赤いマーカーを追加するには、以下のスクリプトに以下を追加します。 var map = … ライン：
var myLatlng =新しいgoogle.maps.LatLng（ 緯度、経度 );varマーカー=新しいgoogle.maps.Marker（{ポジション：myLatlng、地図：地図、タイトル：" 前の '});
強調表示されたテキストを緯度と経度に変更し、人々がマーカーにカーソルを合わせたときに表示するタイトルを変更します。
あなたは好きなだけ多くのマーカーをページに追加することができます。新しい変数や新しい座標を追加するだけですが、地図が小さすぎてすべてのマーカーを表示できない場合は、リーダーがズームアウトしない限り表示されません。
var latlng 2 =新しいgoogle.maps.LatLng（ 37.3316591,-122.0301778 );var myMarker 2 =新しいgoogle.maps.Marker（{position：latlng 2 ,地図：地図、タイトル：" アップルコンピュータ '});
ここに、マーカーを持つGoogleマップの例を示します。 About.com CMSの仕組みのため、リンクをクリックして地図を表示する必要があります。これはあなたのページでは当てはまりません。
05/05あなたのページに2番目（またはそれ以上）の地図を追加する
私の例のGoogle mapsページを見てみたら、ページに複数の地図が表示されています。これは非常に簡単です。方法は次のとおりです。
- このチュートリアルの第2ステップで学習したすべてのマップの緯度と経度を取得します。
- このチュートリアルの手順3で学習した最初のマップを挿入します。マップにマーカーを付ける場合は、手順4のようにマーカーを追加します。
- 2番目のマップでは、initialize（）スクリプトに3行の新しい行を追加する必要があります：
var latlng2 =新しいgoogle.maps.LatLng（ 二番目の座標 );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 、地図： map2 、タイトル： " あなたのマーカータイトル ' }); - 次に、2番目のマップを追加する2番目の場所を追加します。そして、それを与えることを確認してください
id = "map_canvas_2"ID。 - ページが読み込まれると、2つのマップが表示されます
ここに2つのGoogleマップがあるページのコードを示します。
