How to match google maps marker ids with dynamically created ids on buttons

Question

I want to have various buttons that open the corresponding info window on a google maps markers. I have looked at answers like THIS but they don't have dynamically created content. I am getting multiple locations from my db and showing them on a page. They have ids which I have added to the button. I have also added the corresponding ids to the markers (as seen HERE).

Now I just need to trigger the correct marker with the correct id. I think my problem is something to do with scope but I'm a bit lost. Using Laravel 5.

Code is all on a page called index.blade.php. User enters address in form which is geocoded to lat/lng then the nearest articles/stores are displayed on index.blade.php using the Articles Controller.

Code:

@extends('template')
@section('content')
@foreach ($articles as $article)
  <i class="fa fa-plus-square showMoreDetails" onclick="myClick({{$article->id}});"></i>
@endforeach 

@stop
@section('footer')
<script>
    var barTitle = [
        @foreach($articles as $article)
        "{{$article->title}}" ,
        @endforeach
        ];

    var barDeal = [
        @foreach($articles as $article)
        "{{$article->deal}}" ,
        @endforeach
        ];

var infoWindowContent = [];
        var markers = [];
        var i, marker;

function initialize() {

    var map_canvas = document.getElementById('map_canvas');

    var myLatlng = new google.maps.LatLng(parseFloat({{ $article->lat }}),parseFloat({{ $article->lng }}));

    var map_options = {
        center: myLatlng,
        zoom: 15,
        zoomControl: true,
        zoomControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_RIGHT
        },
        scaleControl: true,
        panControl: true,   
        panControlOptions:{
        position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        mapTypeControl: false,   
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options);

    var locations = [
    @foreach($articles as $article)
    [{{$article->lat}}, {{$article->lng}}],
    @endforeach
    ];

    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 infowindow = new google.maps.InfoWindow()

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          // infowindow.setContent(barTitle[i]);
          infowindow.setContent(infoWindowContent[i]);
          infowindow.open(map, marker);
          map.panTo(marker.getPosition());
          map.setZoom(17);
        }
      })(marker, i));
    markers.push(marker);
  }
}

function getInfoWindowDetails(location){
        var contentString = '<div id="infoWindowBox">' +
                            '<h3 id="firstHeading" class="infoWindowTitle">' + barTitle[i] + '</h3>'+
                            '<div id="bodyContent">'+
                                '<div>'+ barDeal[i] + '</div>'+
                            '</div>'+
                        '</div>';
        return contentString;
    }
   google.maps.event.addDomListener(window, "load", initialize);
              function myClick(id){
            google.maps.event.trigger(markers[id], 'click');
        }  

</script>
@stop

My template.blade.php page loads maps like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&libraries=places"></script>

Articles Controller:

public function index(Request $request)
{
    $lat = $request->get('lat');
    $lng = $request->get('lng');
    $distance = 1;
    $categoryChoice = $request->get('categoryList');

    $query = Article::distance($lat, $lng, $distance)
        ->whereHas('categories', function ($query) use ($categoryChoice) {    
            $query->whereIn('categories.id', $categoryChoice);    
        })->get();

     $articles = $query;   

    if(count($articles) == 0) 
    {
        return redirect()->action('HomeController@index');
    }

    return view('articles.index', compact('categories', 'articles', 'days'));

}

Answer 1

I worked it out. I had to use Laravel's 'search' function to find the index of the array of IDs of the articles. Then that integer matched the id of the markers.

@foreach ($articles as $article)
<!-- CREATE AN ARRAY OF IDS THEN GET THE INDEX/KEY OF THIS PARTICULAR ARTICLE ID -->
      <?php $something = $articles->lists('id') 
            $artID = $article->id;  
            $key= $something->search($artID); ?>
  <i class="fa fa-plus-square showMoreDetails" onclick="myClick(<?php echo $key; ?>);"></i>
@endforeach