質問内容
GoogleMap上にピンを立てて、マウスオーバー時にコメントが表示されるアプリを作りました。
この時マウスアウト(マウスがピン上から離れた時)の際にコメントが消えるようにしたいです。
https://gyazo.com/3be8bbb2abd0e3a71182421d02e50b47
※アプリの動画キャプチャ
現在はhtml内に<script>でjavascriptを用いて処理を行っています。
ソースコード
html
1 <script> 2 // 色々定義 3 var marker = []; 4 var infoWindow = []; 5 var currentInfoWindow = null; 6 var hoverinfo = []; 7 8 function initMap() { 9 10 var map = new google.maps.Map( 11 document.getElementById('map'), { 12 zoom: 1.7, 13 center: new google.maps.LatLng(40,135), 14 disableDefaultUI: true 15 }); 16 // 繰り返し処理でマーカーを複数表示 17 <% @stamps.each do |stamp| %> 18 // 緯度経度でマーカーの位置を取得 19 var point = {lat: <%= stamp.country.latitude %>, lng: <%= stamp.country.longitude %>}; 20 // マーカー、デザインは部分テンプレートでなんとかしたい 21 var marker = new google.maps.Marker({position: point, map: map}); 22 23 var infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加 24 content: '<%= stamp.title %>' // 吹き出しに表示する内容 25 }); 26 // マウスオーバー時の処理の呼び出し 27 markerInfo(marker, infoWindow.content); 28 <% end %> 29 } 30 // マウスオーバー時の処理、マウスオーバー解除時に表示を消したい・・・ 31 function markerInfo(marker, content) { 32 google.maps.event.addListener(marker, 'mouseover', function () { 33 hoverinfo = new google.maps.InfoWindow({ 34 content: content 35 }).open(marker.getMap(), marker); 36 }); 37 } 38 39 40 </script>
試したけど上手くいかなかったコード
jQuery
1 $('marker').hover( 2 function(marker, content){ 3 new google.maps.InfoWindow({ 4 content: content 5 }).open(marker.getMap(), marker); 6 }, 7 function(marker, content){ 8 new google.maps.InfoWindow({ 9 content: content 10 }).close(marker.getMap(), marker); 11 } 12 );
javascript
1 function markerInfo(marker, content) { 2 google.maps.event.addListener(marker, 'mouseover', function () { 3 hoverinfo = new google.maps.InfoWindow({ 4 content: content 5 }).open(marker.getMap(), marker); 6 }); 7 8 google.maps.event.addListener(marker, 'mouseout', function () { 9 hoverinfo = new google.maps.InfoWindow({ 10 content: content 11 }).close(marker.getMap(), marker); 12 }); 13 }
補足
まだ勉強を始めて半年の新米です。
質問方法含めアドバイス頂けると嬉しいです!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/19 01:59
2019/03/19 03:03
2019/03/19 03:38