angularjs google maps info window

Question

Guys I have a Problem with InfoWindows from Angular Google Maps. As you can see from this fiddle (from this Question):

1. Info Window does appear on bottom of marker --> very ugly it should appear on top (same as normal Google Maps InfoWindow)
2. 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.

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) :).

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

I set up a Plunker with clickable Markers which have a distinct infoWindow on the top of each of them.

Here's the 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);
            });

        });
    }
}

I hope I've been helpful.