Custom infowindow on marker click using angularjs google maps

Question

I am using angularjs google maps and i would like to custom style the infoWindow which is displayed on a marker click. The ui-gmap-window tag does have custom options and it works fine standalone. However when i try to use it inside the markers tag (ui-gmap-markers) - it does not display the custom styled infoWindow on marker click. The plunkr explains the problem clearly.

http://plnkr.co/edit/Mif7wX1eEkwtfAQ93BCI?p=info

     <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
<!-- WORKS FINE STANDLONE WINDOW -->
           <ui-gmap-window show="show1" coords="map.center" options="windowOptions"></ui-gmap-window>

            <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="onClick">
<!-- DOES NOT WORK INSIDE MARKERS TAG-->
                <ui-gmap-windows show="show" options="windowOptions">

                </ui-gmap-windows>
            </ui-gmap-markers>
        </ui-gmap-google-map>

Miro Salo Miro Salo · Accepted Answer · 2016-03-14T14:06:23

You should use same method as you do in your marks. Because windows needs the name of the property in the models array.

So first add this in your code

        var createRandomWindows = function (i, bounds, idKey) {
        if (idKey == null) {
            idKey = "id";
        }
        var ret = {
            title: 'm' + i,
            options: {
                    boxClass: "infobox",
                    boxStyle: {
                        backgroundColor: "blue",
                        border: "1px solid red",
                        borderRadius: "5px",
                        width: "100px",
                        height: "100px"
                    },
                    content: "Window options box work standalone ------------BUT DOES NOT work on marker click"
                }
        };
        ret[idKey] = i;
        return ret;
    }
$scope.createWindows = [];

and add these

var windows = [];
windows.push(createRandomWindows(i, $scope.map.bounds))
$scope.randomWindows = windows;

in you old code like this

 $scope.$watch(function() { return $scope.map.bounds; }, function(nv, ov) {
        // Only need to regenerate once
        if (!ov.southwest && nv.southwest) {
            var markers = [];
            var windows = [];
            for (var i = 0; i < 50; i++) {
                markers.push(createRandomMarker(i, $scope.map.bounds))
                windows.push(createRandomWindows(i, $scope.map.bounds))
            }
            $scope.randomMarkers = markers;
               $scope.randomWindows = windows;


        }
    }, true);

In you html add these models="randomWindows" options="'options'" in <ui-gmap-windows> </ui-gmap-windows> tag like this

   <ui-gmap-windows models="randomWindows" coords="'self'" options="'options'" icon="'icon'">
        </ui-gmap-windows>

And now it should work :)

http://plnkr.co/edit/L0vjrvW9LkphykapDIP4?p=preview

Custom infowindow on marker click using angularjs google maps

1 Answers