Javascript

【Javascript】Ajax Google Mapsを自サイトに設置する2

Javascript関連情報

更新日：2005年11月30日

Ajax Google Mapsを自サイトに設置する2

高橋登史朗

今回は、地図に影付きのフキダシでメッセージを表示する「情報ウインドウ」を使います。たとえば、お店や会社の場所をマークする時などにこれを使えば、わかりやすい説明ができると思います。

Google Mapsを自サイトに設置する2

1: 地図に情報ウインドウを表示する

2: 情報ウインドウにHTMLを表示する

情報ウインドウにHTMLを表示する

→サンプル

このサンプルも、地図の中心にレインボーブリッジを表示し、そこに「立体ふきだし」のような情報ウインドウを表示します。

ただし、そのウインドウの中に表示するメッセージはHTMLで「"<b>レインボーブリッジ</b>です。<br />HTMLです。"」という文字列を渡し、出力しているところが前ページと違います。
【上記サンプルのソース】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <head><title>Ajax</title>
    <!-- 下記キーは、必ず自分専用のものをhttp://www.google.com/apis/maps/
         で取得して使ってください -->
     <script 
       src="http://maps.google.com/maps?file=api&v=1&key=自分のキー&datum=wgs84" 
       type="text/javascript"></script>
  </head>
  <body>
  
    <!-- このDIVへ地図を表示します -->
    <div id="map" style="width: 500px; height: 400px"></div>
    
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    
    //東京タワーの経緯度とズーム値(整数で0が詳細)を指定します
    //  経緯度は、ここ↓でも調べられます
    //       http://jsgt.org/ajax/newmon/samples/chapter03/03-31/getlatlon2_for_wgs84.htm
    map.centerAndZoom(new GPoint(139.76173639297485, 35.637043219054505), 2);

    //情報ウインドウ内の文字列を指定します
    var msg = "<b>レインボーブリッジ</b>です。<br />HTMLです。";

    //情報ウインドウ表示
    map.openInfoWindowHtml(map.getCenterLatLng(),msg);

    
    //]]>
    </script>

  </body>
</html>

ここでは、openInfoWindowHtml()というメソッドを利用しました。このメソッドは、第2引数にHTMLを渡すことができます。

つまり、情報ウインドウの中へa要素によるリンクやimg要素による画像などを自由に貼り付けることができます(ただし、上記ソースにある通り、XHTML 1.0 Strict内の文書ですのでXHTMLとして少し厳密な書き方をすることが推奨されている点にご留意ください)。

次回は、いよいよXMLHttpRequestを利用して、外部ファイルを動的に読み込んで地図上に表示するAjaxらしい方法を試してみたいと思います。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！