Googleマップで、マーカーをクリックした際に情報ウィンドウ(ふきだし)が

開くようにするにはどのようにしたら良いでしょうか?

今は、表示された際に開くように設定をしています。

また、表示された際に開くようにして、
さらにクリックで表示・非表示を設定することは可能でしょうか?

サンプルファイルなどがあればうれしいです。

どうぞよろしくお願いいたします。



↓現在はこんな感じで設定しています。

<div id="downmap"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap2(document.getElementById("downmap"));
map.setCenter(new GLatLng(35.65872,139.7454), 15);
var marker = new GMarker(new GPoint(139.7454, 35.65872));
map.addOverlay(marker);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//ふきだしの設定
map.openInfoWindowHtml(new GLatLng(35.65872,139.7454),
'<div id="mapn"><b>テスト</b>です</div>');

//==Show source
var targetSource = map.openInfoWindowHtml;
//]]>
</script>

回答の条件
  • 1人3回まで
  • 登録:2006/10/08 23:23:33
  • 終了:2006/10/09 01:56:18

回答(2件)

id:talepanda No.1

talepanda回答回数57ベストアンサー獲得回数122006/10/09 00:15:25

ポイント300pt
<!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"
      xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <style type="text/css">
      v\:* {
      behavior:url(#default#VML);
      }
    </style>
    <script src=""
	    type="text/javascript"></script>
    <script type="text/javascript">
      var oiw=null,map=null;
      function load() {
      if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map")),cx=139.7454,cy=35.65872;
      map.setCenter(new GLatLng(cy,cx), 15);
      var marker = new GMarker(new GLatLng(cy,cx));
      map.addOverlay(marker);
      var f=function(){marker.openInfoWindowHtml("<p>HTML</p>");oiw=map.getInfoWindow();}
      GEvent.addListener(marker, "click", function(){if(!oiw || oiw.isHidden())f();else map.closeInfoWindow();});
      f();
      
      }
      }
    </script>
  </head>
  <body onload="load()" onunload="GUnload()"><div id="map" style="width: 500px; height: 300px"></div></body>
</html>

みたいな。情報が足りないので、ざっくりと。

もっと細かい要求があれば、対応できます。

id:ohtsu6

talepanda さま

どうもありがとうございます。

設置させていただいてほぼうまくいきました。

一点だけ質問させてください。

下記のように情報ウィンドウ内に画像を配置したいのですが、

画像を配置するとなぜかエラーになってしまいます。

var f=function(){marker.openInfoWindowHtml("
戻る");oiw=map.getInfoWindow();}

これを解決する方法はありますでしょうか?

どうぞよろしくお願いいたします。

2006/10/09 00:37:25
id:talepanda No.2

talepanda回答回数57ベストアンサー獲得回数122006/10/09 01:25:12

marker.openInfoWindowHtml("<img src="./test.jpg"><br>戻る");

もしかして、ですが、

marker.openInfoWindowHtml("<img src='./test.jpg'><br>戻る");

こういうことですか?

quoteの問題でGoogle map とは無関係ですが。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません