- 締切済み
グーグルマップAPIで右クリックで吹き出し
お世話になっております。 グーグルマップAPIを使ってサイトを作成しています。 右クリックをして、吹き出しを出すにはどうしたらよろしいでしょうか？ 以下のようなスクリプトがあるのですが、全く反応しません。 google.maps.event.addListener(map, "rightclick", function() { infowindow.setContent(contentString); infowindow.open(map,marker); document.getElementById("result").innerHTML += "<br>rightclickイベント発生："+(new Date()); 上記ではなく、rightclickの部分をclickにすると動きますが、右クリックで動作させたいのです。 できれば、その吹き出しの中にフォームを作りたいと思っています。 よろしくお願い致します。
- shakehands22
- お礼率0% (0/7)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
ダブルクリックしてください。
関連するQ&A
- google map吹き出し
下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
- ベストアンサー
- AJAX
- google mapに複数マーカーを設置する関数
google mapに複数のマーカーとそれに伴う吹き出しを作成しています。 マーカーの数は上下するのですが、大体30～40個くらいが設置される予定です。 ただできるだけjsのソースを少なくしたいと思っているため、ループでまとめて記述できないかと試行錯誤しています。 ちなみに現状は以下のように記述しています。 * * * * * * * * * * * * * * * * * * * * * * * * * var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, title: 'マーカー2' }); var contentString2 = '吹き出しテキスト'; var infowindow2 = new google.maps.InfoWindow({ position: new google.maps.LatLng(座標), content: contentString2 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2); }); * * * * * * * * * * * * * * * * * * * * * * * * * この「2」の部分を各数字に変えてマーカー分記述していたのですが、 面倒で尚且つソースが非常に多くなるため困っています。 for関数でループさせてみようと思い作成してみたのですが、うまく動作しません。 ちなみに吹き出し内のコメントはすべて違う内容になるため、せめてgoogle.maps.event.addListenerの部分だけでも、と思っています。 javascriptは初心者で、上記のソースも色々調べた上で見よう見まねで作っています。 どなたか効率のよい方法を教えていただけますでしょうか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- googleマップAPIクリックイベント
googleマップAPIで、 var marker = new Array(); for(i=0; i<10; i++){ marker[i] = new GMarker(ZAHYOU[i]); map.addOverlay(marker[i]); GEvent.addListener(marker[i], 'click', function(){alert(i);}); } というコードでは、１０カ所にきちんとマーカーは付けられますが、 クリックイベントではすべて「10」が表示されます。なぜでしょうか？ マーカーとクリックイベントを対応させるにはどうすればいいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- GoogleMap クリックで情報ウィンドウ
GoogleMap API v3で、任意の一点をクリックするとマーカーが置かれ座標取得、 そしてそのマーカーに情報ウィンドウが出るようにしたいと思っています。 //地図クリックイベントの登録 google.maps.event.addListener(map, 'click', function(event) { if (Marker){Marker.setMap(null)}; Marker = new google.maps.Marker({ position: event.latLng, draggable: true, map: map }); infotable(Marker.getPosition().lat(), Marker.getPosition().lng(),map.getZoom()); で、マーカーの設置と座標取得はできるのですが、 new google.maps.InfoWindowをどこに置いていいのかが分かりません。 どなたかお詳しい方、ご教示願えないでしょうか。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- WordpressのGmapに吹き出しを付けたい
wordpressにACFを利用して埋め込んでいるGooglemapのピンにクリックで表示される吹き出しを付けたいのですが、うまくいきません。 しばらく前にwordpressのサポートでも質問したのですが回答を得られなかったのでかなり困っています。 状況としては、 「Advanced Custom Fieldsの全項目解説・公開側表示編集編」（http://blog.s-giken.net/253.html#googlemap） を参考に下記のように書きました。 記述場所はphpファイル内です。 <?php $name = get_field ( 'name' ); $map = get_field ( 'map' ); echo '<div id="map" style="width: 95%; height: 300px; margin:5px auto;"></div>'; echo '<span itemprop="hasMap"><script type="text/javascript">'; echo ' google.maps.event.addDomListener(window,"load",function(){'; echo ' var mapdiv=document.getElementById("map");'; echo ' var myOptions={zoom:15,center:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};'; echo ' var map=new google.maps.Map(mapdiv,myOptions);'; echo ' var marker=[];'; echo ' var infowindow=[];'; echo ' marker[0]=new google.maps.Marker({icon:"http://maps.google.com/mapfiles/kml/paddle/red-stars.png",position:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),map:map,title:"' . $name . '"});'; echo ' var markerCluster=new MarkerClusterer(map,marker);'; echo ' });'; echo '</script></span>'; ?> この状態でACF側で入力した住所をもとにマップ上に指定のマーカーを立てることはできているのですが、ここにクリックで表示される吹き出しを追加しようとしてもうまくいきません。 「マーカーがクリックされたら情報ウィンドウ（ふきだし）を表示する」（http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/marker/0004/） や 「配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する」（https://ghweb.info/post-2709.html） を参考にいろいろいじってみて、 google.maps.event.addListener(marker, "click", function() { infowindow[0]=new google.maps.InfoWindow({ content: "このコンテンツを表示します" }); infowindow.open(map, marker); }); みたいな感じのをecho' 'で挟んで追記すれば動くかなと試したのですが、どうもうまくいきません。 解決方法をご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- Google Map （外部から情報ウィンドウ開く
Google Maps API v3 において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************１件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************１件目のデータ*************** // ***************２件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************２件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1 <a href="javascript:myclick(0)">あいうえお商店</a></p> 2 <a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- Google Maps API Ver. 2のinfowindow（吹き出し）について
Google Maps API Ver. １をVer. ２に更新した際、 infowindow（吹き出し）が出なくなっていまいました。 修正したところは、 <script src="http://maps.google.co.jp/maps?file=api&v=1&key=… 「v=1」を「v=2」に変更のみです。 他に修正するところがあるのでしょうか？ どなたか教えてください。
- 締切済み
- その他（プログラミング・開発）
- グーグルマップの吹出しは複数可能？
グーグルマップを自分のサイトに設置しようとしています。 マーカーをクリックすると吹き出しが出ますが 他のマーカーをクリックすると吹出しが消えて２つ表示ができません。 吹出しでなくてもいいのですが 吹出し見たいのを複数常時表示することはできますか？ お忙しいところ是非教えていただければと思います。 よろしくお願いします。
- 締切済み
- HTML
- Google maps api v3
https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら（手探り）ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
- ベストアンサー
- JavaScript
- GoogleMapsAPIv3でXMLを取得(3)
お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。 function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
