Question

我有一组链接到谷歌地图上的标记的文章。我正在使用Laravel 5和谷歌地图API。当我点击文章时，它的信息div扩展，谷歌地图信息窗也被扩展。

我想要做的是点击谷歌地图标记并展开文章信息div。即我希望它以两种方式工作。

文章是动态创建的。

以下是我的Google地图代码的相关部分：

    var barID = [
    @foreach($articles as $article)
    {{$article->id}},
    @endforeach
    ];
for (i = 0; i < locations.length; i++) {
    infoWindowContent[i] = getInfoWindowDetails(locations[i]);
    var location = new google.maps.LatLng(locations[i][0], locations[i][1]);
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        id: barID[i],
        icon: 'images/happymarker.png'
    });
  var infoBubble = new InfoBubble({
      map: map, etc..
    });
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoBubble.setContent(infoWindowContent[i]);
          infoBubble.open(map, marker);
          map.panTo(marker.getPosition());
          map.setZoom(17);
        }
      })(marker, i));
      markers.push(marker);
}
// SHOW MORE INFO BUTTON TRIGGERS INFOWINDOW/MARKER
    function myClick(id){
        google.maps.event.trigger(markers[id], 'click');
    }

这是我的尝试 - 但它不起作用。

marker.addListener('click', function(theID) {

$(".descriptionTextContainer" + theID).show();  

      });

MARKUP / ARTICLES（地图容器外）。我已经为所有文章添加了一个id，因此它将是class =“descriptionTextContainer 24” - 所有不同的文本容器在其类中都将具有唯一ID。

 <article class="barContainer mix category-<?php echo $article->id; ?>" data-rating="<?php echo $article->rating; ?>" data-distance="<?php echo $article->distance; ?>">
 $something = $articles->lists('id'); 
                    $artID = $article->id;  
                    $key= $something->search($artID); ?>   

// THIS IS THE PLACE WHERE I CLICK TO SHOW THE 'descriptionTextContainer'               
  <div class="resultsTitle showMoreDetails" onclick="myClick(<?php echo $key; ?>);">
    <div class="barTitleContainer"><h2>{{$article->title}}</h2></div>
  </div>           
  <div class="descriptionTextContainer <?php echo $key; ?>">            
// THIS IS HIDDEN TILL THE MARKER OR THE 'ShowMoreDetails' is clicked                  
  </div>
</article>

这是the site，因为它正在运作。

Answer 1

你的标记已经有了一个绑定：你可以通过在id上添加一行来打开div，因为你已经将文章ID存储在marker.id中

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infoBubble.setContent(infoWindowContent[i]);
      infoBubble.open(map, marker);
      map.panTo(marker.getPosition());
      map.setZoom(17);
      // Add this line
      $(".descriptionTextContainer" + marker.id).show(); 
    }
  })(marker, i));

如何通过单击谷歌地图标记来定位地图外的元素

1 个答案: