title: Open infoWindows from an external link outside of the google map
body: <p>I'm currently working with the Google Maps API to create a property map. I have it controlled through a Custom Post type which brings in the markers onto the map with infoWindows which open when they're clicked. </p>
  
  <p>I now need to implement some kind of way to list the properties (eventually into a slider) beneath the map so that when the property is clicked outside of the map the map pans to the marker and opens the infoWindow.</p>
  
  <p>At the moment I can't get it to work at all - I'm not a very strong javascript coder so any help would be much appreciated.</p>
  
  <p>I have a list of the post type entries below the map at the moment but no way of linking them..</p>
  
  <p>Here's a snippet of the code so far for the map..</p>
  
  <pre><code>     /* MARKER 1 */
  
  function add_marker( $marker, map ) {
  
      // var
      var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png';
      var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
  
      // create marker
  
      var marker = new google.maps.Marker
      ({
          position    : latlng,
          map         : map,
          icon: image
      });
  
  
  
      // add to array
      map.markers.push( marker );
  
      // if marker contains HTML, add it to an infoWindow
      if( $marker.html() )
      {
          // create info window
          var infowindow = new google.maps.InfoWindow({
              content     : $marker.html()
          });
  
  
  
  
  
          // show info window when marker is clicked
          google.maps.event.addListener(marker, 'mouseover', function() {
  
              if($('.gm-style-iw').length) {
                  $('.gm-style-iw').parent().hide();
              }
  
  
              infowindow.open( map, marker );
  
  
          });
  
  
  
              google.maps.event.addListener(marker, "mouseout", function() {
                  marker.setAnimation(null);
              });
  
  
  
  
      }
  
  
  
  
  
  
  }
  </code></pre>
  
  <p>And this is the code I have so far for the list of properties beneath the map..</p>
  
  <pre><code>    &lt;?php 
  $maps = get_posts( array(
      'post_type' =&gt; 'properties',
      'posts_per_page' =&gt; -1
      ) );?&gt;
  
  &lt;?php foreach($maps as $map): ?&gt;
      &lt;?php
       $location = get_field('location',$map-&gt;ID);
       $price = get_field('price',$map-&gt;ID);
       $squareft = get_field('sq_ft_total',$map-&gt;ID);
       $buylet = get_field('to_buy_or_to_let',$map2-&gt;ID);
       $link = the_permalink($map-&gt;ID);
  
  ?&gt;
  
  
  &lt;div id="map_list"&gt;
  
         &lt;ul id="map-locations"&gt;
  
              &lt;li data-lat="&lt;?php echo $location['lat']; ?&gt;" data-lng="&lt;?php echo $location['lng']; ?&gt;"&gt;
                  &lt;h3&gt;&lt;a href="&lt;?php echo post_permalink( $map ); ?&gt;"&gt;&lt;?php echo $location['address']; ?&gt;&lt;/a&gt;&lt;/h3&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
  
  
       &lt;/div&gt;
  
  
  &lt;?php endforeach; ?&gt; 
  </code></pre>