人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: ohtsu6
●カテゴリ:インターネット ウェブ制作
✍キーワード:CDATA Googleマップ MAP ウィンドウ クリック
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● talepanda
●300ポイント
<!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>

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

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

◎質問者からの返答

talepanda さま

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

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

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

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

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

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

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

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


2 ● talepanda
●0ポイント
marker.openInfoWindowHtml("<img src="./test.jpg"><br>戻る");

もしかして、ですが、

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

こういうことですか?

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ