打开InfoWindow with点击链接后，谷歌地图API

Question

我已经阅读了一堆这里的帖子，但似乎无法弄清楚我做错了什么。有关如何添加链接而不是从Google地图之外打开infowindow的任何建议？

我已经试过......

<a href="javascript:google.maps.event.trigger(gmarkers[0],'click');">Open Info Window</a> 

和

function infoOpen(i) {google.maps.event.trigger(gmarkers[i], 'click');} 

，但没有运气！

var locations = [ 
    <?php $i = 1; while (have_posts()) : the_post(); ?> 
     <?php if (get_geocode_latlng($post->ID) !== '') : ?> 
      { 
       latlng : new google.maps.LatLng<?php echo get_geocode_latlng($post->ID); ?>, 
       info : $('#item<?php echo $i; ?>').clone().get(0), 

     }, 
     <?php endif; ?> 
    <?php $i++; endwhile; ?> 
]; 


// Enable the visual refresh 
google.maps.visualRefresh = true; 
var number = '1'; 
var infowindow = new google.maps.InfoWindow({maxWidth: 200}); 
var iconBase = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|F2A327|000000'; 
/* var iconBase = 'http://www.google.com/mapfiles/marker'+number+'.png'; */ 
var shadow = new google.maps.MarkerImage('/wp-content/themes/digimix/shadow.png', new google.maps.Size(37, 34)); 


function initialize() { 
map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    minZoom: 4, 
    maxZoom: 18, 
    center: new google.maps.LatLng(41.4758162, -71.29734339999999), 
    mapTypeControl: true, 
mapTypeControlOptions: { 
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
}, 
    panControl: false, 
    scaleControl: false, 
    zoomControl: true, 
    zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE 
}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

//create empty LatLngBounds object 
var bounds = new google.maps.LatLngBounds(); 

//when infowindow is open, close info window when you click on the map 
google.maps.event.addListener(map, 'click', function() { 
    infowindow.close(); 
}); 

for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: locations[i].latlng, 
     icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+(i+1)+'|F2A327|000000', 
     title: "Click for more information", 
     shadow: shadow, 
     map: map, 
    }); 


    //extend the bounds to include each marker's position 
    bounds.extend(marker.position); 


    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     infowindow.setContent(locations[i].info); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 

    //now fit the map to the newly inclusive bounds 
map.fitBounds(bounds);} 

Answer 1

您没有google.maps.Marker对象的全局gmarkkers数组来触发点击事件。您需要在实例化标记时创建该标记。

// in global scope (outside of any function) 
var gmarkers = []; 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    minZoom: 4, 
    maxZoom: 18, 
    center: new google.maps.LatLng(41.4758162, -71.29734339999999), 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
    }, 
    panControl: false, 
    scaleControl: false, 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.LARGE 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    //create empty LatLngBounds object 
    var bounds = new google.maps.LatLngBounds(); 

    //when infowindow is open, close info window when you click on the map 
    google.maps.event.addListener(map, 'click', function() { 
    infowindow.close(); 
    }); 

    for (var i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: locations[i].latlng, 
     icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+(i+1)+'|F2A327|000000', 
     title: "Click for more information", 
     shadow: shadow, 
     map: map, 
    }); 

    gmarkers.push(marker); 

    //extend the bounds to include each marker's position 
    bounds.extend(marker.position); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     infowindow.setContent(locations[i].info); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 

    //now fit the map to the newly inclusive bounds 
    map.fitBounds(bounds); 
}