title: How to show marker on google map when clicked on list item from hamburger menu
body: <p>I am working on google maps. I want to link markers to items in menu. If I click the the name, it should show respective marker only. But my code is pointing to only last marker in the map.</p>
  
  <p>All my links are pointing to last marker. Please help me solving this problem.</p>
  
  <pre><code>&lt;div class="menu"&gt;
       &lt;div data-bind="foreach: visible"&gt;
          &lt;p class="clicked" data-bind="text: location, click"&gt;&lt;/p&gt;
       &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>javaScript:</p>
  
  <pre><code>var bounds = new google.maps.LatLngBounds();
  
  for (var i = 0; i &lt; markersData.length; i++) {
  
      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var loc = markersData[i].locationId;
      var name = markersData[i].location;
  
      $('.clicked').on('click', function() {
  
          if ($('.clicked').location = name) {
              console.log(location);
              createMarker(latlng, loc);
  
          }
      });    
  </code></pre>
  
  <p>I changed the code but this one is displaying all the markers at a time on clicking single link.</p>
  
  <pre><code>function displayMarkers() {
  
       var bounds = new google.maps.LatLngBounds();
  
       for (var i = 0; i &lt; markersData.length; i++) {
  
       var latlng = new google.maps.LatLng(markersData[i].lat,markersData[i].lng);
           var loc = markersData[i].locationId;
           var name = markersData[i].location;
  
           checkLinkClicked(latlng, loc, name);
           createMarker(latlng, loc);
  
           bounds.extend(latlng);
       }
  
       map.fitBounds(bounds);
   }
  
   function checkLinkClicked(latlng, loc, name) {
  
       $(’.clicked’).on(‘click’, function() {
  
           if ((’.clicked’).location = name) {
               createMarker(latlng, loc);
  
           }
       });
   }
  </code></pre>
  
  <p>Please help.</p>