angularjs google maps info window

Question

Ребята У меня проблема с InfoWindows из угловых карт Google. Как вы можете видеть из this скрипки (от this вопроса):

1. Окно информации действительно появляется на дне маркеров -> очень некрасиво он должен появиться на вершине (так же, как нормальный Google Maps InfoWindow)
2. I нужны динамические «заголовки», поэтому каждое информационное окно должно иметь другой контент, основанный на маркере -> в настоящее время адрес маркера, позже, возможно, больше.

У меня уже было несколько часов, и я, к сожалению, не смог это исправить. Любая помощь высоко оценена (как я думаю, у других есть и такие проблемы) :).

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" 
     }] 
    }], 
}; 

});

Answer 1

Я установил Plunker с интерактивными Markers, которые имеют отличный infoWindow в верхней части каждого из них.

Вот JS:

angular.module('mapApp', []); 

angular 
    .module('mapApp') 
    .controller('MapController', MapController); 

function MapController(){ 

    var map = null; 
    var locations = []; 
    var icon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"; 

    //markers array 
    var markers = {"points" :[ 
     {"name" : "point1", "geo" : { "coordinates" : [ 52.483, 30 ], "type" : "Point" } }, 
     {"name" : "point2", "geo" : { "coordinates" : [ 42.483, 26.084 ], "type" : "Point" } }, 
     {"name" : "point3", "geo" : { "coordinates" : [ 32.483, 16.084 ], "type" : "Point" } } 
    ]}; 


    initMap(); 

    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 3, 
      center: new google.maps.LatLng(32.483, 16.084) 
     }); 

     for (var i = 0; i < markers.points.length; i++) { 
      var currMarker = markers.points[i]; 
      var contentString = 
       '<p><b>Name</b>: ' + currMarker.name + '</br>' + 
       '<b>Type</b>: ' + currMarker.geo.type + '</br>' + 
       '<b>Lat</b>: ' + currMarker.geo.coordinates[0] + '</br>' + 
       '<b>Long</b>: ' + currMarker.geo.coordinates[1] + 
       '</p>'; 

      // Converts each of the JSON records into Google Maps Location format (Note [Lat, Lng] format). 
      locations.push({ 
       latlon: new google.maps.LatLng(currMarker.geo.coordinates[1], currMarker.geo.coordinates[0]), 
       message: new google.maps.InfoWindow({ 
        content: contentString, 
        maxWidth: 320 
       }), 
       username: currMarker.name, 
       type: currMarker.geo.type 
      }); 
     } 

     // Loop through each location in the array and place a geometry 
     locations.forEach(function (n) { 
      console.log(n); 
      var marker = new google.maps.Marker({ 
       position: n.latlon, 
       map: map, 
       icon: icon 
      }); 

      // For each marker created, add a listener that checks for clicks 
      google.maps.event.addListener(marker, 'click', function() { 
       // When clicked, open the selected marker's message 
       n.message.open(map, marker); 
      }); 

     }); 
    } 
} 

Я надеюсь, что я был полезным.