- 締切済み
jquery.gmap3の件
http://blog.bumberboom.net/demo/jquery.gmap3/ の一番下のマップに、吹き出しを1個ずつ表示（クリックしたら、別のinfowindowが立ち上がるように）にさせたいのですが、どなたか分かる方いらっしゃますでしょうか。 よろしくお願いします。
- Hide3641
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
A No1です。 ＞別のマーカーをクリックすると最初にクリックして出現した吹き出しが閉じて ＞新しい吹き出しが出てくるというような～～ 吹き出しを開く時に、他のものを閉じる処理を入れればよいだけなのですが、あるいは同じ吹き出しの内容を変えて表示するといった処理に変えるかですね。 jquery.gmap3を知らないので検索してみましたが、これのことでしょうか？ https://github.com/bumberboom/jquery.gmap3 一通りの説明はあるようですが、各infoWindowがどこに格納されているのかが記して無いので、コードを解析しないとわからない… コードを解析している時間がないので、とりあえず、おおもとのgoogole mapだけを用いて同様のことを行うごく単純化したサンプルを作成してみました。 アレンジする場合は以下をご参考になさってください。 https://developers.google.com/maps/documentation/javascript/reference （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div#gMap02 { width: 960px; height: 280px; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div id="gMap02"></div> <script type="text/javascript"> //■マーカー用データ var markerData = [ { latitude: 35.9917348, longitude: 140.6405342, title: '鹿島アントラーズ', content: '<div class="infoWindowWrapper"><h4>鹿島アントラーズ</h4><p>県立カシマサッカースタジアム</p></div>' }, { latitude: 35.9030894, longitude: 139.7175708, title: '浦和レッズ', content: '<div class="infoWindowWrapper"><h4>浦和レッズ</h4><p>埼玉スタジアム2002</p></div>' }, { latitude: 34.725217, longitude: 137.875005, title: 'ジュビロ磐田', content: '<div class="infoWindowWrapper"><h4>ジュビロ磐田</h4><p>ヤマハスタジアム</p></div>' } ]; // マップを表示 var mapCanvas = new google.maps.Map(document.getElementById("gMap02"), { zoom: 5, center: new google.maps.LatLng( 37.5, 137.5), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infoWnd = new google.maps.InfoWindow(); for(var i=0, marker; marker=markerData[i++];){ marker.position = new google.maps.LatLng(marker.latitude, marker.longitude); createMarker(marker); } //◇マーカー作成処理 function createMarker(marker){ var mark = new google.maps.Marker(marker); mark.setMap(mapCanvas); google.maps.event.addListener(mark, "click", function(){showInfo(marker);}); } //◇インフォウィンドウ表示処理 function showInfo(marker){ infoWnd.setOptions(marker); infoWnd.open(mapCanvas); } </script> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
jquery.gmap3って知りませんけれど… 表示を見る限りでは、ご提示のサンプルはすでにご質問のようになっているみたいですが、どこが違うのでしょうか？
補足
すいません。説明不足でした。 現在、各マーカーをクリックしたら吹き出しが1個ずつ増えていきますが、そうではなく 例えば、あるマーカーをクリックすると吹き出しが1個出現し、別のマーカーをクリックすると最初にクリックして出現した吹き出しが閉じて新しい吹き出しが出てくるというような形にしたいのです。 よろしくお願いします。