title: angularjs google maps info window
body: <p>Guys I have a Problem with InfoWindows from Angular Google Maps.
  As you can see from <a href="http://jsfiddle.net/9yyu0nj2/" rel="nofollow noreferrer">this</a> fiddle (from <a href="https://stackoverflow.com/questions/28291980/angularjs-google-maps-markers-with-window-infowindow-not-showing#comment65030826_28292301">this</a> Question):</p>
  
  <ol>
  <li>Info Window does appear on bottom of marker --> very ugly it should appear on top (same as normal Google Maps InfoWindow)</li>
  <li>I want dynamic "titles" so every info window should have a different content based on the marker --> currently address of the marker, later on maybe more. </li>
  </ol>
  
  <p>I already googled a few hours and I was unfortunately not able to fix that. Any help highly appreciated (as I think other have this issues as well) :).</p>
  
  <pre><code>var myApp = angular.module('app', ['uiGmapgoogle-maps']);
  
  myApp.config(function (uiGmapGoogleMapApiProvider) {
      uiGmapGoogleMapApiProvider.configure({
          key: '',
          v: '3',
          libraries: 'weather,geometry,visualization'
      });
  });
  
  myApp.controller('MainCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
  uiGmapGoogleMapApi.then(function (maps) {
      $scope.googlemap = {};
      $scope.map = {
          center: {
              latitude: 37.78,
              longitude: -122.41
          },
          zoom: 14,
          pan: 1,
          options: $scope.mapOptions,
          control: {},
          events: {
              tilesloaded: function (maps, eventName, args) {},
              dragend: function (maps, eventName, args) {},
              zoom_changed: function (maps, eventName, args) {}
          }
      };
  });
  
  $scope.windowOptions = {
      show: false
  };
  
  $scope.onClick = function (data) {
      $scope.windowOptions.show = !$scope.windowOptions.show;
      console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
      console.log('This is a ' + data);
      //alert('This is a ' + data);
  };
  
  $scope.closeClick = function () {
      $scope.windowOptions.show = false;
  };
  
  $scope.title = "Window Title!";
  
  uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
  .then(function (instances) {
      console.log(instances[0].map); // get the current map
  })
      .then(function () {
      $scope.addMarkerClickFunction($scope.markers);
  });
  
  $scope.markers = [{
      id: 0,
      coords: {
          latitude: 37.7749295,
          longitude: -122.4194155
      },
      data: 'restaurant'
  }, {
      id: 1,
      coords: {
          latitude: 37.79,
          longitude: -122.42
      },
      data: 'house'
  }, {
      id: 2,
      coords: {
          latitude: 37.77,
          longitude: -122.41
      },
      data: 'hotel'
  }];
  
  $scope.addMarkerClickFunction = function (markersArray) {
      angular.forEach(markersArray, function (value, key) {
          value.onClick = function () {
              $scope.onClick(value.data);
              $scope.MapOptions.markers.selected = value;
          };
      });
  };
  
  
  $scope.MapOptions = {
      minZoom: 3,
      zoomControl: false,
      draggable: true,
      navigationControl: false,
      mapTypeControl: false,
      scaleControl: false,
      streetViewControl: false,
      disableDoubleClickZoom: false,
      keyboardShortcuts: true,
      markers: {
          selected: {}
      },
      styles: [{
          featureType: "poi",
          elementType: "labels",
          stylers: [{
              visibility: "off"
          }]
      }, {
          featureType: "transit",
          elementType: "all",
          stylers: [{
              visibility: "off"
          }]
      }],
  };
  </code></pre>
  
  <p>});</p>