Google Maps API V3 - 元素onClick - 中心地圖/ Open InfoWindow

Question

最近我一直在玩Google Maps API，並且有鏈接執行JS函數。這個JS函數部分工作，點擊它將地圖集中到引腳座標上，但我也希望它顯示信息窗口;除了打開infowindow之外，一切都有效。任何幫助將是驚人的！該代碼與PHP/WP功能有點混亂。

<script type="text/javascript"> 

    var map; 
    var infowindow; 
    var marker; 

    function initialize() { 
     var styles = [ 
      { 
       stylers: [ 
        { hue: "#c09c3d" }, 
       ] 
      },{ 
       featureType: "road", 
       elementType: "geometry", 
       stylers: [ 
        { lightness: 50 }, 
        { visibility: "simplified" } 
       ] 
      } 
     ]; 

     infowindow = new google.maps.InfoWindow({ 
      maxWidth: 275 
     }); 

     var mapOptions = { 
      zoom: 4, 
      center: new google.maps.LatLng(<?php echo $centerCoords; ?>), 
      styles: styles, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

     map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 

     var image = '<?php echo get_template_directory_uri(); ?>/images/icon_marker.png'; 

     var locations = [ 
      <?php 
       // LOOP ARGUMENTS 
       $args = array('post_type' => 'cbd_dealers', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC'); // -1 Shows ALL Posts 
       $loop = new WP_Query($args); 
       while ($loop->have_posts()) : $loop->the_post(); 

       // CUSTOM CONTENT 
       $dealerStreetAddress = get_post_meta($post->ID,"dealerStreetAddress",true); 
       $dealerCity = get_post_meta($post->ID,"dealerCity",true); 
       $dealerState = get_post_meta($post->ID,"dealerState",true); 
       $dealerZipCode = get_post_meta($post->ID,"dealerZipCode",true); 
       $dealerCoords = get_post_meta($post->ID,"dealerCoords",true); 
       $dealerPhoneNumber = get_post_meta($post->ID,"dealerPhoneNumber",true); 
       $dealerLink = get_post_meta($post->ID,"dealerLink",true); 
      ?> 

      { 
       latlng : new google.maps.LatLng<?php echo $dealerCoords; ?>, 

       info: '<style>a{color:#000000 !important;}a:hover{color:#DCB54F !important;}</style><strong style="line-height:25px;display:block;width:230px;"><?php the_title(); ?></strong><?php echo $dealerStreetAddress; ?><br /><?php echo $dealerCity; ?>, <?php echo $dealerState; ?>&nbsp;<?php echo $dealerZipCode; ?><br /><?php echo $dealerPhoneNumber; ?><br /><a href="<?php echo $dealerLink; ?>" style="line-height:25px;display:block;width:230px;" target="_blank">View Website</a>' 
      }, 

      <?php /* END WHILE AND RESET QUERY */ endwhile; wp_reset_query(); ?> 

       ]; 

      for (var i = 0; i < locations.length; i++) { 
       marker = new google.maps.Marker({ 
        position: locations[i].latlng, 
        icon: image, 
        map: map 
       }); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 

        infowindow.setContent(locations[i].info); 
        infowindow.open(map, marker); 
        } 
       })(marker, i)); 
      } 

    } 
    function loadScript() { 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize'; 
     document.body.appendChild(script); 
     } 
    function set_map_center(lat, lng) { 

       var myLatLng = new google.maps.LatLng(lat, lng); 
       infowindow.open(map,marker); 

       map.setCenter(myLatLng); 
       map.setZoom(12); 
       infowindow.open(map, marker); 
     } 

    window.onload = loadScript; 
</script> 

Answer 1

由於蘇維的評論，我更好地理解。

首先，當您創建它們時，您需要將所有標記存儲在數組中。然後，在您的set_map_center函數中，您可以掃描標記以找到匹配的緯度/經度，然後觸發該標記的點擊事件。

要觸發標記的點擊事件：

google.maps.event.trigger(markers[i], 'click'); 

這是我如何檢查一個緯度/經度比賽

function set_map_center(lat, lng){ 
    var pos = new google.maps.LatLng(lat, lng) 
    for(var i=0;i<markers.length;i++){ 
     if(markers[i].position.equals(pos)) 
      google.maps.event.trigger(markers[i], 'click'); 

    } 
} 

JSFiddle Example