title: Clicking on an item in a list opens a Google Maps marker’s info window using Knockout.js and vanilla JavaScript
body: <p>Starting from a simple list of favorite venues stored in an array as objects, I need to have these venues show up on google maps with their own markers. When the markers are clicked, their info windows should open and display their information. That’s pretty straight forward and I’ve already done that. </p>
  
  <p>In addition to this, I also have the names of those venues displayed in a list to the right of the map. My trouble is connecting these two things — the markers and their respective titles in the list to the right. For instance, when I click on an item (venue name) in the list view, I need the map marker on that location to display its info. </p>
  
  <p>For the life of me I can’t seem to make sense of how to connect the two things. I’m using Knockout.js to keep the Javascript and html in sync, and you can see below the map that when I click an item in the list the ‘currentPlace’ is displayed. This won’t be in the end application, but it illustrates what I’m going for. Basically I need that currentPlace to trigger a marker click???</p>
  
  <p>Some things I’ve looked at:
  <a href="https://stackoverflow.com/questions/9469322/google-maps-api-showing-a-markers-infowindow-from-a-link-outside-of-the-map">google maps api .... showing a markers infowindow from a link outside of the map</a></p>
  
  <p>This seems to work at first, but a click on a map marker doesn’t open a window…Also they’re using jQuery and I’m trying to get this to work using only Knockout.js and vanilla JavaScript.</p>
  
  <p>Also, this:
  <a href="http://jsfiddle.net/RASG/X5mhL/" rel="nofollow noreferrer">http://jsfiddle.net/RASG/X5mhL/</a></p>
  
  <p>This illustrates exactly what I’m shooting for but with this example the hrefs are simply entered into the html. I’m trying to have this work in JavaScript in a way that I can easy add new locations just by adding a new place to the initialPlaces array.</p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <p>Here is my html with the Knockout.js data-binds:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-8"&gt;
          &lt;hr&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4" id="search-header"&gt;
          &lt;form id="new-search"&gt;
              &lt;input type="text" class="text-input" data-bind="value: searchEntry"&gt;
              &lt;input type="submit" value="look for things" class="search-button" data-bind=""&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-8" id="mapContainer"&gt;
              &lt;div class="map" id="map-canvas"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;div id="places"&gt;
              &lt;h2 id="list-title"&gt;FAVORITE PLACES&lt;/h2&gt;
              &lt;hr&gt;
              &lt;div id="place-list" data-bind="foreach: placeList"&gt;
                  &lt;h3 data-bind="text: $data.name, click: $parent.setPlace" id="list-item"&gt;&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="place" data-bind="with: currentPlace"&gt;
      &lt;h2 data-bind="text: name"&gt;&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is my JavaScript:</p>
  
  <pre><code>var infowindow = new google.maps.InfoWindow();
  
  var Place = function(data) {
  var self = this;
  
  this.name = ko.observable(data.name);
  this.lat = ko.observable(data.lat);
  this.long = ko.observable(data.long);
  
  var titleString = String(data.name);
  
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(data.lat, data.long),
      title: titleString,
      map: map
  });
  
  google.maps.event.addListener(marker, 'click', function () {
      map.panTo(marker.position);
      infowindow.open(map, marker);
      infowindow.setContent(titleString);
  });
  
  markers.push(marker);
  
  };
  
  var markers = ko.observableArray([]);
  
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = { center: { lat: 40.675087, lng: -73.975524},
      zoom: 12,
      disableDefaultUI: true
      };
  
  map = new google.maps.Map(mapCanvas, mapOptions);
  
  var initialPlaces = [
      { 
          name: 'Soda Bar',
          lat: '40.678396',
          long: '-73.968349'
      },
      {
          name: 'Brooklyn Roasting Co.',
          lat: '40.704334',
          long: '-73.986524'
      },
      {
          name: 'Prospect Park',
          lat: '40.661034',
          long: '-73.968876'
      }
  ];
  
  
  var ViewModel = function() {
      var self = this;
  
      this.placeList = ko.observableArray([]);
  
      initialPlaces.forEach(function(placeItem){
          self.placeList.push( new Place(placeItem));
          console.log(placeItem);
      });
  
      this.currentPlace = ko.observable(this.placeList()[0]);
  
      this.setPlace = function(clickedPlace) {
          self.currentPlace(clickedPlace);
      };
      /*
       * Create a thing to hold search entry
       */
      this.searchEntry = ko.observable('Search')
  };
  
  ko.applyBindings(new ViewModel());
  </code></pre>