Angular Google Maps - Window wont open on click?

Question

I am trying to implement a google map in my ionic app.

I am able to dynamically generate markers, but can't seem to bind infowindows.

$scope.arrayOfMarkers = [];
for (var i = 0 ; i < results.length ; i++) {
    var user = results[i];
    var mySID = JSON.parse(window.localStorage.getItem("userObject")).userProfileId;
    if (user.userProfileId != mySID) {
        var userCoords = {
            latitude: user.userProfileLatitude,
            longitude: user.userProfileLongitude
        };
    var markerOptions = {
        animation: "drop"
    }
    var thisMarker = {
        id:i,
        coords: userCoords,
        options: markerOptions,
        idKey: i,
        window: {
            show: false,
            title: "Test"
        }
}
$scope.arrayOfMarkers.push(thisMarker);
   }
}

HTML

<ui-gmap-google-map id="map" center="map.center" zoom="map.zoom">
                <ui-gmap-marker ng-repeat="marker in arrayOfMarkers" coords="marker.coords" options="marker.options"  events="marker.events" idkey="marker.id" window="marker.window">                
                </ui-gmap-marker>
            </ui-gmap-google-map>

When I click the markers nothing happens. How should I be implementing window?

http://angular-ui.github.io/angular-google-maps/#!/

you are not bind arrayOfMarkers to the scope $scope $scope.arrayOfMarkers = arrayOfMarkers; — Abdelrahman M. Allam
– Abdelrahman M. Allam, Commented Mar 12, 2016 at 14:26
I looked at the documentation I wonder where from you use window directive — Abdelrahman M. Allam
– Abdelrahman M. Allam, Commented Mar 12, 2016 at 14:36

Shaishab Roy · Accepted Answer · 2016-03-12 16:06:44Z

1

You should put ui-gmap-window directive inside the ui-gmap-marker and call a function on click of marker. in my example call function toggleInfoWindow() like click="toggleInfoWindow()". it may help you

<ui-gmap-google-map id="map" center="map.center" zoom="map.zoom">
     <ui-gmap-marker ng-repeat="marker in arrayOfMarkers" coords="marker.coords" options="marker.options" click="toggleInfoWindow()" events="marker.events" idkey="marker.id" window="marker.window">  
           <ui-gmap-window options="windowOptions">
                <div>{{title}}</div> //your information here
            </ui-gmap-window>              
     </ui-gmap-marker>
 </ui-gmap-google-map>

In controller add toggleInfoWindow function:

$scope.toggleInfoWindow= function() {
     $scope.windowOptions.visible = !$scope.windowOptions.visible;
};

answered Mar 12, 2016 at 16:06

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anthonyhumphreys Over a year ago

Thank you so so much you have saved my sanity!

Abdelrahman M. Allam · Accepted Answer · 2016-03-12 14:43:51Z

1

I looked at documentation did not found window directive but look what you can use

 <ui-gmap-windows show="{{window.show }}">
            <div ng-non-bindable>{{window.title}}</div>
 </ui-gmap-windows>

inside ui-gmap-marker to display window

you can refer to link doc for window

edited Mar 12, 2016 at 14:43

answered Mar 12, 2016 at 14:38

Abdelrahman M. Allam

92210 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular Google Maps - Window wont open on click?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related