2017-03-29 12 views
0

私はユーザーがマーカーをクリックすると、開いているすべてのマーカーを開いて閉じます。私は運がない、どのようにそれを行うにはどのようなアイデアとこのコードでしようとしている?開かれた情報ウィンドウを閉じる - google maps api

は、私が使用している完全なスクリプトを使用して更新し、回答に可能な解決策に基づく:

(function($) { 

    /* 
    * new_map 
    * 
    * This function will render a Google Map onto the selected jQuery element 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 4.3.0 
    * 
    * @param $el (jQuery element) 
    * @return n/a 
    */ 

    function new_map($el) { 

     // var 
     var $markers = $el.find('.marker'); 


     // vars 
     var args = { 
     scrollwheel: false, 
     zoom : 5, 
     center : new google.maps.LatLng(0, 0), 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 


     // create map   
     var map = new google.maps.Map($el[0], args); 


     // add a markers reference 
     map.markers = []; 


     // add markers 
     $markers.each(function(){ 

      add_marker($(this), map); 

     }); 


     // center map 
     center_map(map); 


     // return 
     return map; 

    } 

    /* 
    * add_marker 
    * 
    * This function will add a marker to the selected Google Map 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 4.3.0 
    * 
    * @param $marker (jQuery element) 
    * @param map (Google Map object) 
    * @return n/a 
    */ 

    function add_marker($marker, map) { 

     // var 
     var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 

     // create marker 
     var marker = new google.maps.Marker({ 
     position : latlng, 
     map  : map, 
     icon: '<?php echo get_template_directory_uri(); ?>/assets/img/google-map-marker.png', 
     }); 

     // add to array 
     map.markers.push(marker); 

     if($marker.html()){ 
     var infoWindows = []; 
     // show info window when marker is clicked 
     google.maps.event.addListener(marker, 'click', function() { 

      // Need to clear up old info windows before adding new ones 
      for (var i = 0; i < infoWindows.length; i++) { 
      infoWindows[i].setMap(null); 
      } 

     // create info window 
      var infoWindow = new google.maps.InfoWindow({ 
      content : $marker.html() 
      }); 

      infoWindow.open(map, marker); 
      infoWindows.push(infoWindow); 
     }); 
     } 

    } 


    /* 
    * center_map 
    * 
    * This function will center the map, showing all markers attached to this map 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 4.3.0 
    * 
    * @param map (Google Map object) 
    * @return n/a 
    */ 

    function center_map(map) { 

     // vars 
     var bounds = new google.maps.LatLngBounds(); 

     // loop through all markers and create bounds 
     $.each(map.markers, function(i, marker){ 

     var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 

     bounds.extend(latlng); 

     }); 

     // only 1 marker? 
     if(map.markers.length == 1) 
     { 
     // set center of map 
      map.setCenter(bounds.getCenter()); 
      map.setZoom(16); 
     } 
     else 
     { 
     // fit to bounds 
     map.fitBounds(bounds); 
     } 

    } 

    /* 
    * document ready 
    * 
    * This function will render each map when the document is ready (page has loaded) 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 5.0.0 
    * 
    * @param n/a 
    * @return n/a 
    */ 
    // global var 
    var map = null; 

    $(document).ready(function(){ 

     $('.acf-map').each(function(){ 

     // create map 
     map = new_map($(this)); 

     }); 

    }); 

    })(jQuery); 
+0

[Google Maps API - 一度に開いている情報ウィンドウのみ](http://stackoverflow.com/questions/33713676/google-maps-api-only-one-infowindow-open-at-once) ) – geocodezip

+0

可能な複製[InfoWindowをgooglemapで自動的に閉じる](http://stackoverflow.com/questions/28138468/auto-close-infowindow-in-googlemap) – geocodezip

+0

[InfoWindowを閉じる前に閉じる] /stackoverflow.com/questions/14321808/close-infowindow-before-open-another) – geocodezip

答えて

0

私はあなたのコードに少し変更しました。

var infoWindows = []; 
if($marker.html()){ 

    // Need to clear up old info windows before adding new ones 
    for (var i = 0; i < infoWindows.length; i++) { 
     infoWindows[i].setMap(null); 
    } 
    // show info window when marker is clicked 
    google.maps.event.addListener(marker, 'click', function() { 

    // create info window 
    var infoWindow = new google.maps.InfoWindow({ 
     content : $marker.html() 
    }); 

    infoWindow.open(map, marker); 
    infoWindows.push(infoWindow); 
    }); 
} 

私はうまくいきます。そうでない場合は、コードの詳細をお知らせください。 ありがとう

+0

あなたのコードを使用していますが、マーカーをクリックすると、次のエラーが表示されます: 'infoWindows is not defined ' – codek

+0

私は私の編集しました回答。追加var infoWindows = [];あなたのコードの上に。 配列の変数(あなたの場合は "infoWindows")を宣言してからオブジェクトを挿入する必要があります。ありがとうございます。 – taymyinl

+0

それを修正してもエラーは出ませんが、問題は解決されません。別のマーカーをクリックすると、すべてのインフォボックスが開かれます – codek

関連する問題