title: How to Trigger Google Maps Marker From Outside of Map
body: <p><strong>I have this HTML:</strong></p>
  
  <pre><code>&lt;ul class="google-map__trigger"&gt;
  &lt;li data-id="marker-1" class="google-map__trigger-item"&gt;Trigger Marker 1&lt;/li&gt;
  &lt;li data-id="marker-2" class="google-map__trigger-item"&gt;Trigger Marker 2&lt;/li&gt; 
  &lt;/ul&gt;
  &lt;div id="google-map" class="google-map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>I have this JS:</strong></p>
  
  <pre><code>// Infowindow, latitude, longitude
  var locations = [
      ['&lt;div class="google-map__infowindow"&gt;&lt;h4&gt;Lervig Brygge&lt;/h4&gt;&lt;p&gt;Her ligger Lervig Brygge.&lt;/p&gt;&lt;/div&gt;', 58.96746,5.765269],
      ['&lt;div class="google-map__infowindow"&gt;&lt;h4&gt;Regn&lt;/h4&gt;&lt;p&gt;I denne rundkjøringen regner det. Det regner alltid i denne rundkjøringen. Det er litt av et naturfenomen!&lt;/p&gt;&lt;/div&gt;', 58.96579,5.759518]
  ];
  
  // Icons are located in this folder
  var iconURLPrefix = '/_themes/prototype/graphics/icons/';
  
  // Icons are named
  var icons = [
      iconURLPrefix + 'location.svg',
      iconURLPrefix + 'weather-rain.svg',
  ]
  
  // Map options
  var map = new google.maps.Map(document.getElementById('google-map'),
      {
          zoom: 16,
          center: new google.maps.LatLng(58.966222, 5.762930),
          mapTypeControl: false,
          streetViewControl: false,
          panControl: false,
          scrollwheel: false,
          navigationControl: false,
          scaleControl: false,
          zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_BOTTOM
      }
  });
  
  var infowindow = new google.maps.InfoWindow({
      maxWidth: 200
  });
  
  var marker;
  var markers = new Array();
  
  var iconCounter = 0;
  
  // Add the markers and infowindows to the map
  for (var i = 0; i &lt; locations.length; i++) {  
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon : icons[iconCounter]
  });
  
  markers.push(marker);
  
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
      }
  
      })(marker, i));
  
      iconCounter++;
  
  }
  
  function AutoCenter() {
      // Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
          // Go through each...
          $.each(markers, function (index, marker) {
          bounds.extend(marker.position);
      });
      // Fit these bounds to the map
      map.fitBounds(bounds);
  }
  AutoCenter();
  </code></pre>
  
  <p>How can I trigger my map markers from outside of the Google Map, using the list in the HTML above? I have seen different ways of solving this, but I haven't managed to make it work with my code...</p>
  
  <p>Appreciate any help!</p>