Google Maps InfoWindow открыт, когда присутствует только один маркер

Question

Я принимаю расширенные пользовательские поля (ACF). Адрес карты Google и создание карты Google с несколькими маркерами и уникальным InfoWindow. Содержимое этого InfoWindow затем заменяется в зависимости от того, какой маркер активен.

А массив PHP $location настроен через ACF, а javascript проходит и запускается в API Карт Google.

Я хочу открыть InfoWindow по умолчанию, когда есть только один маркер.

Я выяснил, как определить, существует ли только один маркер в конце функции new_map & hellip;

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

Но я не уверен, что позвонить/как получить доступ к API Карт Google после того, как карта уже оказаны.

Я думаю, что моя проблема связана с областью, поскольку я пробовал каждую комбинацию 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); 
    } 

} 
}