--.--.-- スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
まだ、サイトにはGoogleクロールはやってきません。
なので、サイトの中身だけが充実していきます。

気分的には、ゴーストタウンをコツコツ修理している変わり者ですね。

今回は、GoogleMapを利用することにしました。

利用方法は、思ったより簡単です。

[1]GoogleMAPの利用で必要なAPIキーなるものを取得。
    (1)APIキー取得サイトへアクセスします。
    (2)サイトは英文ですが、下の方に「I have read and agree with the terms and conditions
   と書かれたチェックボックスがありますので、チェックして、
   「 My web site URL: 」というテキストボックスにGoogleMapを利用するサイトのURL
   (トップページのフォルダ(index.html等は不要)でOK)を入力して、
       [Generate API Key]というボタンをクリック。
  これで、APIキーの取得は完了です。
  
     やたらと長い意味不明な文字列(一部改変)
  例:ABQIAAAA0itPm0-bTzVZY2AEIYDMDBQZ*************lYnakhQyA8us788QoLrX2v_OIAIWNzZF2A
     これが、APIキーです。
[2]あとは、サンプルに基づき、実装するだけです。
  (1)<head>~</head>内に以下の記述を追加
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
    key=取得したAPIキー"
type="text/javascript"></script>

    <script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
// 地図上を中心に移動(GLatLngの内容は、緯度・経度・ズームレベルです。)
map.setCenter(new GLatLng(43.055324, 141.353985), 14);
map.setMapType(G_NORMAL_MAP );
// 地図上に吹き出し+リンクを表示
var html = '<a href=リンクさせたいURL>表示させるタイトル</a>';
map.openInfoWindowHtml(new GLatLng(43.055324, 141.353985), html);
}
}
</script>

 (2)地図を表示させる位置(<body>~</body>)に
      <div id="map" style="width: 500px; height: 300px"></div>
     を追加するだけです。width, heightは地図の表示サイズです。

  これだけで、GoogleMapが利用可能になります。

 (3)問題は、(1)で指定する緯度、経度だと思いますが、非常に便利なサイトがあります。

  Geocodingというサイトがあり、ここで住所を入力すると、カンタンに緯度・経度を

  調べることができます。

GoogleMapは非常に便利なツールです。
是非、お試しあれ。
スポンサーサイト

Secret

TrackBackURL
→http://alchemist009.blog51.fc2.com/tb.php/37-86f3e7fc

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。