質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2902閲覧

Google Mapのピンをマウスオーバーした時に表示したコメントを、マウスアウト時にクローズ出来ない!

k.chisato

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/03/18 04:18

質問内容

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 }

補足

まだ勉強を始めて半年の新米です。
質問方法含めアドバイス頂けると嬉しいです!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

未テストですが、こんな感じで。コードに全角の空白がたくさん混じっているので、空白の種類がわかるエディタを使うなどしたほうがよいです。

js

1/* */// 色々定義 //< 全角の空白削除 2var map; //< 追加 3var markers = []; //< 名前を変更 4var infoWindows = []; //< 名前を変更 5var currentInfoWindow = null; //< 未使用 6function initMap() { 7 /* */map = new google.maps.Map( //< varを削除、全角の空白削除 8 document.getElementById( 'map' ), 9 { 10 zoom: 1.7, 11 center: new google.maps.LatLng( 40, 135 ), 12 disableDefaultUI: true 13 } ); 14 // 繰り返し処理でマーカーを複数表示 15 <% @stamps.each do |stamp| %> 16 // マウスオーバー時の処理の呼び出し 17 markerInfo( { lat: <%= stamp.country.latitude %>, lng: <%= stamp.country.longitude %> }, '<%= stamp.title %>' ); 18 <% end %> 19} 20function markerInfo( point, content ) { //< 引数含め大幅に書き直し 21 var marker = new google.maps.Marker( { position: point, map: map } ); 22 var infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加 23 content: content // 吹き出しに表示する内容 24 } ); 25 google.maps.event.addListener( marker, 'mouseover', function () { 26 infoWindow.open( map, marker); 27 } ); 28 google.maps.event.addListener( marker, 'mouseout', function () { 29 infoWindow.open( map, marker); 30 } ); 31 markers.push( marker ); //< 追加 32 infoWindows.push( infoWindow ); //< 追加 33}

投稿2019/03/18 17:23

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k.chisato

2019/03/19 01:59

出来ました! 本当に本当にありがとうございます!! 最後の記述がopen、openになっていたので後半をcloseに変更したら動きました。(下記) ''' google.maps.event.addListener( marker, 'mouseover', function () { infoWindow.open( map, marker); } ); google.maps.event.addListener( marker, 'mouseout', function () { infoWindow.open( map, marker); } ); ''' 一点質問なのですが、一番最後の方で下記記述がありますが、こちらの意味は何でしょうか? 試しにコメントアウトしてみても一応動いたので気になり・・・ ''' markers.push( marker ); //< 追加 infoWindows.push( infoWindow ); //< 追加 '''
kei344

2019/03/19 03:03

ご自身のコードを見てください。最初に準備していますよね。 このコード内では使用していませんが、後からmarker/infoWindowsを一括で消したりする時に使用します。
k.chisato

2019/03/19 03:38

なるほど、自分で作っておいて全く利用していませんでしたね・・・ ありがとうございます! 理解が深まりました。 全角空白の件も大変参考になります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問