从谷歌地图外部的外部链接打开infoWindows

我目前正在使用Google Maps API来创建属性映射。 我通过自定义post类型控制它，它将标记带到地图上，infoWindows在点击时打开。

我现在需要实现某种方式来列出地图下面的属性（最终进入滑块），这样当在地图外部单击属性时，地图会平移到标记并打开infoWindow。

目前我根本无法让它工作 – 我不是一个非常强大的JavaScript编码器所以任何帮助将非常感激。

我目前在地图下面有一个post类型条目列表，但无法链接它们。

这是目前为止地图的代码片段..

/* MARKER 1 */ function add_marker( $marker, map ) { // var var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png'; 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: image }); // add to array map.markers.push( marker ); // if marker contains HTML, add it to an infoWindow if( $marker.html() ) { // create info window var infowindow = new google.maps.InfoWindow({ content : $marker.html() }); // show info window when marker is clicked google.maps.event.addListener(marker, 'mouseover', function() { if($('.gm-style-iw').length) { $('.gm-style-iw').parent().hide(); } infowindow.open( map, marker ); }); google.maps.event.addListener(marker, "mouseout", function() { marker.setAnimation(null); }); } } 

这是我到目前为止在地图下面的属性列表中的代码。

   'properties', 'posts_per_page' => -1 ) );?>  ID); $price = get_field('price',$map->ID); $squareft = get_field('sq_ft_total',$map->ID); $buylet = get_field('to_buy_or_to_let',$map2->ID); $link = the_permalink($map->ID); ?> 
 
 <li data-lat="" data-lng=""> 
<a href="https://stackoverflow.com/questions/32351008/open-infowindows-from-an-external-link-outside-of-the-google-map/">
  
 
  

Answer 1

最简单的方法是将每个标记添加到标记数组中。 然后为每个标记创建一个链接，其中包含对标记的标记索引的引用，这样您就可以在单击外部链接时触发标记本身的单击事件。

 function initialize() { var markers = new Array(); var mapOptions = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(1, 1) }; var locations = [ [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'], [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'], [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'], [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'], [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'], [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6'] ]; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var infowindow = new google.maps.InfoWindow(); for (var i = 0; i < locations.length; i++) { // Append a link to the markers DIV for each marker $('#markers').append('' + locations[i][1] + ' '); var marker = new google.maps.Marker({ position: locations[i][0], map: map, title: locations[i][1], }); // Register a click event listener on the marker to display the corresponding infowindow content google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][2]); infowindow.open(map, marker); } })(marker, i)); // Add marker to markers array markers.push(marker); } // Trigger a click event on each marker when the corresponding marker link is clicked $('.marker-link').on('click', function () { google.maps.event.trigger(markers[$(this).data('markerid')], 'click'); }); } initialize(); 

JSFiddle演示