Open infoWindow from outside Map

[zemirco]

First of all: Thank you very much for this plugin! It works great and the docs are awesome. So far all my needs were satisfied.

I've got one problem that I can't solve: How can I open an infoWindow at a certain marker position from a button (click) that is located next to the map.

Here is my usecase: I've got a list (ul>li) with my objects next to my map. On my map I've got the markers representing the location of my objects. I'd like to open the corresponding infoWindow when I click on an object inside my list (ul>li). I can open the infoWindow when I click on a marker, that works fine.

I probably comes down to the question how I can access the marker object outside of the gm-markers directive.

Thank you!

[dylanfprice]

The basic strategy is to induce a custom event on your marker. I added an example to the plunker called InfoWindows2. Here's the relevant bits:

<h3 id="infowindows2">InfoWindows2</h3>
<div class="row-fluid margin-bottom60" ng-controller="InfoWindows2Ctrl">
  <div class="span6">
    <div gm-info-window="infoWindow">
      <h4>{{selectedVolcano.name}}</h4>
      {{selectedVolcano.elevationMeters}}m
    </div>
    <gm-map gm-map-id="'infoWindows2'" gm-center="center" gm-zoom="zoom" gm-map-options="options.map" class="map">
      <gm-markers gm-objects="volcanoes"
                  gm-get-lat-lng="{ lat: object.location.lat, lng: object.location.lng }"
                  gm-get-marker-options="{ title: object.name, clickable: false }"
                  gm-events="markerEvents"
                  gm-on-openinfowindow="selectedVolcano = object; infoWindow.open(marker.getMap(), marker);">
      </gm-markers>
    </gm-map>
  </div>
  <div class="span6">
    <div ng-repeat="volcano in volcanoes">
      <button class="btn" ng-click="openInfoWindow(volcano)">More about {{volcano.name}}</button>
    </div>
  </div>
</div>

angular.module('Example').
controller('InfoWindows2Ctrl', function($scope, angulargmUtils) {
  $scope.options = {
    map: {
      center: new google.maps.LatLng(48, -121),
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    },
  };

  $scope.volcanoes = [
    {
      name: 'Mount Rainier',
      elevationMeters: 4392,
      location: {
        lat: 46.852947, 
        lng: -121.760424
      }
    },
    {
      name: 'Mount Baker',
      elevationMeters: 3287,
      location: {
        lat: 48.776797, 
        lng: -121.814467
      }
    },
    {
      name: 'Glacier Peak',
      elevationMeters: 3207,
      location: {
        lat: 48.111844, 
        lng: -121.11412
      }
    }
  ];

  $scope.openInfoWindow = function(volcano) {
    $scope.markerEvents = [
      {
        event: 'openinfowindow',
        locations: [angulargmUtils.objToLatLng(volcano.location)]
      },
    ];
  }

});

[zemirco]

Thank you! Works fine.