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

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

ただいまの
回答率

89.85%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 577

k.chisato

score 8

質問内容

GoogleMap上にピンを立てて、マウスオーバー時にコメントが表示されるアプリを作りました。
この時マウスアウト(マウスがピン上から離れた時)の際にコメントが消えるようにしたいです。

https://gyazo.com/3be8bbb2abd0e3a71182421d02e50b47
※アプリの動画キャプチャ

現在はhtml内に<script>でjavascriptを用いて処理を行っています。

ソースコード

  <script>
     // 色々定義
      var marker = [];
      var infoWindow = [];
      var currentInfoWindow = null;
      var hoverinfo = [];

      function initMap() {

         var map = new google.maps.Map(
            document.getElementById('map'), {
            zoom: 1.7,
            center: new google.maps.LatLng(40,135),
                       disableDefaultUI: true
          });
          // 繰り返し処理でマーカーを複数表示
          <% @stamps.each do |stamp| %>
           // 緯度経度でマーカーの位置を取得
            var point = {lat: <%= stamp.country.latitude %>, lng: <%= stamp.country.longitude %>};
            // マーカー、デザインは部分テンプレートでなんとかしたい
           var marker = new google.maps.Marker({position: point, map: map});
           
           var infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
                  content: '<%= stamp.title %>' // 吹き出しに表示する内容
            });
            // マウスオーバー時の処理の呼び出し
            markerInfo(marker, infoWindow.content);
          <% end %>
      }
            // マウスオーバー時の処理、マウスオーバー解除時に表示を消したい・・・
    function markerInfo(marker, content) {
      google.maps.event.addListener(marker, 'mouseover', function () {
          hoverinfo = new google.maps.InfoWindow({
              content: content
          }).open(marker.getMap(), marker);
      });
    }


  </script>

試したけど上手くいかなかったコード

    $('marker').hover(
      function(marker, content){
        new google.maps.InfoWindow({
              content: content
          }).open(marker.getMap(), marker);
      },
      function(marker, content){
        new google.maps.InfoWindow({
              content: content
          }).close(marker.getMap(), marker);
      }
      );
    function markerInfo(marker, content) {
      google.maps.event.addListener(marker, 'mouseover', function () {
          hoverinfo = new google.maps.InfoWindow({
              content: content
          }).open(marker.getMap(), marker);
      });

      google.maps.event.addListener(marker, 'mouseout', function () {
          hoverinfo = new google.maps.InfoWindow({
              content: content
          }).close(marker.getMap(), marker);
      });
    }

補足

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

/* */// 色々定義 //< 全角の空白削除
var map; //< 追加
var markers = []; //< 名前を変更
var infoWindows = []; //< 名前を変更
var currentInfoWindow = null; //< 未使用
function initMap() {
  /* */map = new google.maps.Map( //< varを削除、全角の空白削除
    document.getElementById( 'map' ),
    {
      zoom: 1.7,
      center: new google.maps.LatLng( 40, 135 ),
      disableDefaultUI: true
    } );
  // 繰り返し処理でマーカーを複数表示
  <% @stamps.each do |stamp| %>
    // マウスオーバー時の処理の呼び出し
    markerInfo( { lat: <%= stamp.country.latitude %>, lng: <%= stamp.country.longitude %> }, '<%= stamp.title %>' );
  <% end %>
}
function markerInfo( point, content ) { //< 引数含め大幅に書き直し
  var marker = new google.maps.Marker( { position: point, map: map } );
  var infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
    content: content // 吹き出しに表示する内容
  } );
  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 ); //< 追加
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/19 10: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 ); //< 追加
    '''

    キャンセル

  • 2019/03/19 12:03

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

    キャンセル

  • 2019/03/19 12:38

    なるほど、自分で作っておいて全く利用していませんでしたね・・・

    ありがとうございます!
    理解が深まりました。

    全角空白の件も大変参考になります!

    キャンセル

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

  • ただいまの回答率 89.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる