當只有一個標記時，Google地圖InfoWindow打開

Question

我正在使用高級自定義字段（ACF）Google地圖地址並創建帶有多個標記和單個InfoWindow的Google Map。 InfoWindow的內容隨後根據哪個標記處於活動狀態進行交換。

PHP $location數組是通過ACF設置的，並且javascript循環並運行到Google Maps API。

我想在默認情況下打開InfoWindow，只有一個標記。

我已經想出瞭如何確定new_map函數結束時是否只有一個標記...... hellip;

if($markers.length == 1) { 
    console.log('yes'); 
} 

但是我不確定在地圖已經渲染後如何調用/如何訪問Google Maps API。

我認爲我的問題是範圍相關的，因爲我已經嘗試了我能想到的google.maps.event.trigger()和google.maps.Map.event.trigger(marker, 'click');樣式函數的每種組合。

Array 
(
    [address] => 123 Hamaker Rd, Manheim, PA, United States 
    [lat] => 40.1789636 
    [lng] => -76.3852963 
) 



<script type="text/javascript"> 
(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 
    */ 

    /* 
    * Modified from ACF Documentation, here are some links 
    * http://support.advancedcustomfields.com/forums/topic/multiple-post-points-on-google-maps/ 
    * http://fancysquares.com/google-maps-infowindow-advanced-custom-fields-acf/ 
    */ 

    function new_map($el) { 

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

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

    // 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); 

    /* Conditional works to find if it only has one marker, but I can't figure out what to trigger */ 
    //console.log($markers); 

    if($markers.length == 1) { 
     console.log('yes'); 
    } 

    } 

    var infowindow = new google.maps.InfoWindow({ 
    content  : '' 
    }); 

    /* 
    * 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, 
     open  : true 
    }); 

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

    // if marker contains HTML, add it to an infoWindow 
    if($marker.html()) { 

     // show info window when marker is clicked & close other markers 
     google.maps.event.addListener(marker, 'click', function() { 
      //swap content of that singular infowindow 
      infowindow.setContent($marker.html()); 
      infowindow.open(map, marker); 
     }); 

     // close info window when map is clicked 
     google.maps.event.addListener(map, 'click', function(event) { 
      if (infowindow) { 
       infowindow.close(); 
      } 
     }); 

    } 
    } 

    /* 
    * 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(10); 
    } 
    else { 
     // fit to bounds 
     map.fitBounds(bounds); 
    } 
    } 


    /* 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); 
</script> 

Answer 1

在new_map函數中，您可以在添加標記之前檢查數組的長度。如果長度爲1，則傳遞一個參數，指示showInfoWindow爲true，否則爲false。

var showInfoWindow = false; 
if($markers.length == 1) { 
     showInfoWindow = true 
    } 

// add markers 
    $markers.each(function(){ 
     add_marker($(this), map , showInfoWindow); 
    }); 

然後修改add_marker代碼如下

function add_marker($marker, map, showInfoWindow) { 

// 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, 
    open  : true 
}); 

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

// if marker contains HTML, add it to an infoWindow 
if($marker.html()) { 

    // show info window when marker is clicked & close other markers 
    google.maps.event.addListener(marker, 'click', function() { 
     //swap content of that singular infowindow 
     infowindow.setContent($marker.html()); 
     infowindow.open(map, marker); 
    }); 

    // close info window when map is clicked 
    google.maps.event.addListener(map, 'click', function(event) { 
     if (infowindow) { 
      infowindow.close(); 
     } 
    }); 

    if(showInfoWindow) 
    { 
     infowindow.setContent($marker.html()); 
     infowindow.open(map, marker); 
    } 

} 
}