..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−GoogleMapを設置する

JavaScript入門&サンプル集...
GoogleMapを設置する
 ホームページにGoogleMapを設置します。

↑ドラッグで動きます


1.Googleのアカウントを取得
 GoogleMapを設置するには、Googleのアカウントを取得する必要があります。(既に取得している方は2へ)
 Gmail等も使えるようになって便利です。
   https://www.google.com/accounts/ManageAccount

2.GoogleマップAPIキーを取得
 さらに、コードの中で使用するGoogleマップAPIキーを取得します。
 キーとは英数字の羅列で、例えば以下のような感じのものです。
   (ex.「ABQIAAAAMhOXEGQg6DJU7K_5z03RHBRStbE4dmH2wGls7TJriSz13EN5GhRlufSx0mhO_2oco43B6BRqY3o01A」)
 1つのキーでウェブサーバー上の1つのディレクトリが有効となります。
 つまり、http://plusone.jpn.org/で取得した場合、このディレクトリ以下のURL全てで使用可能です。
 その他、制限等はGoogleマップAPIの利用規約をご参照下さい。
   http://code.google.com/intl/ja/apis/maps/

3.HEADタグ間に以下のコードを記入します
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=『APIキー』" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 //<![CDATA[
   function load() {
     if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map"));
       map.setCenter(new GLatLng(『緯度』,『経度』),『ズーム率:0〜17』);
     }
   }
 //]]>
 </script>
 ・『APIキー』の部分は取得したキーをベタ打ち。「”」や「’」等は不用です。
 ・『緯度』『経度』『ズーム率』は数値を記入。ズーム率は17が最大にズームした状態になります。

4.BODYタグは以下のように記入します
 <body onload="load()" onunload="GUnload()">

5.表示したい場所に以下を記入します
 <div id="map" style="width: 〜px; height: 〜px"></div>
 ・width(幅)とheight(高さ)について「〜」に数値を記入します。
【サンプルを実行する:mpasample.html】

<html>
 <head>
  <title>Google Maps JavaScript API Example</title>
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
key=ABQIAAAAMhOXEGQg9DJU7K_4z03RHBRStbE3dmH1wGls7TJriSz17EN5GhRlufSx2mhO_7oco33B6BRqY2o02A" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
  //<![CDATA[
  function load() {
   if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.6587, 139.7454), 17);
   }
  }
  //]]>
  </script>
 </head>
 <body onload="load()" onunload="GUnload()">
  <div id="map" style="width: 500px; height: 300px"></div>
 </body>
</html>

※注意:APIキーは各自で取得して下さい

..


..