lundi 24 juillet 2017

How to target an element outside map by clicking on google maps marker

I have a group of articles that are linked to markers on a google map. I'm using Laravel 5 and the google maps API. When I click on an article it's information div expands and a google maps infowindow is also expanded.

What I want to do is click on a google maps marker and expand the article information div. ie I want it to work both ways.

The articles are dynamically created.

Here's the relevant part of my google maps code:

    var barID = [
    @foreach($articles as $article)
    ,
    @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');
    } 

THE ARTICLE (off the map)

 <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></h2></div>
  </div>           
  <div class="descriptionTextContainer">            
// THIS IS HIDDEN TILL THE MARKER OR THE 'ShowMoreDetails' is clicked                  
  </div>
</article>

Here's the site as it's working atm.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire