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