How to connect list of places with Google Map Points

Question

They are 2 separate entities atm:

https://jsfiddle.net/31b2tbpu/13/

I wish to link them so clicking on a list item makes the box appear on the respective map ite

Answer 1

1. keep an array of markers so you can access them by index

   var gmarkers = [];

2. push the markers onto that array as they are instantiated.

3. add code to click on the appropriate marker when the li element is clicked:

$('#list li').each(function(i, e) {
  $(e).click(function(i) {
    return function(e) {
      google.maps.event.trigger(gmarkers[i], 'click');
    }
  }(i));
});

Note that this code assumes the locations array and the list items are in the same order. You could use the name or ids instead of that assumption.

proof of concept fiddle

code snippet:

// Locations: [title, lat, long, number]
var locations = [
  ['Bar Termini', 51.51367, -0.12981, 1],
  ['French House', 51.51272, -0.13170, 2],
  ['Mark\'s Bar', 51.51133, -0.13563, 3],
  ['Hakkasan (bar)', 51.51017, -0.14474, 4],
  ['Bar Américain at Brasserie Zédel', 51.51017, -0.14474, 5],
  ['Experimental Cocktail Club', 51.51193, -0.13103, 6],
  ['Milk & Honey', 51.51377, -0.13653, 7],
  ['Blind Pig', 51.51379, -0.13668, 8],
  ['Opium', 51.51176, -0.13145, 9]
];
var gmarkers = [];
// Map Settings
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 16,
  center: new google.maps.LatLng(51.51367, -0.12981),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow;

var marker, i;
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    label: String(locations[i][3])
  });
  gmarkers.push(marker);
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
$('#list li').each(function(i, e) {
  $(e).click(function(i) {
    return function(e) {
      google.maps.event.trigger(gmarkers[i], 'click');
    }
  }(i));
});

#map {
  height: 400px;
  width: 100%;
}
a {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div data-role="page" id="map_result">
  <div data-role="header" data-position="fixed">
    <h1>Multiple Marker</h1>
  </div>
  <div data-role="content" style="padding:0;">
    <div id="map"></div>
    <div id="list">
      <ol>
        <li>
          <a>Bar Termini</a>
        </li>
        <li>
          <a>French House</a>
        </li>
        <li>
          <a>Mark's Bar</a>
        </li>
        <li>
          <a>Hakkasan (bar)</a>
        </li>
        <li>
          <a>Bar Americain at Brasserie Zedel</a>
        </li>
        <li>
          <a>Experimental Cocktail Club</a>
        </li>
        <li>
          <a>Milk &amp; Honey</a>
        </li>
        <li>
          <a>Blind Pig</a>
        </li>
        <li>
          <a>Opium</a>
        </li>
      </ol>
    </div>
  </div>
</div>