Skip to content
This repository has been archived by the owner on Nov 30, 2018. It is now read-only.

Windows directive not rendering the custom-class(options.boxClass) passed as an attribute. #1077

Closed
adityabalusu opened this issue Jan 13, 2015 · 12 comments

Comments

@adityabalusu
Copy link

Hi. I recently upgraded to 2.0.12 since 1.0.17 is not compatible with angular#1.3.8. Clearly a lot of things have changed since then and I did spend a considerable time porting all my previous code to the latest version. Everything has worked except for the ui-gmap-windows directive. The window does pop up. But it is not using my custom class which was perfectly working earlier. From here, I have tried to provide as much info as I can think of for you guys to get a better understanding. Please bear with me if it is not sufficient. I will be more than glad to provide whatever else you need from me. Need to fix this asap since we have a production upgrade scheduled soon. Thanks a lot in advance, guys. You rock.

The haml code for my own map directive:

 %ui-gmap-google-map(center='map.center' pan='map.pan' options='map.options' draggable='true' zoom='map.zoom')
     %ui-gmap-markers(models='map.markers' icon="'icon'" coords="'self'" click="'click'" events="'events'")
        %ui-gmap-windows(show="'showWindow'" closeClick="'closeClick'" isIconVisibleOnClick="'isIconVisibleOnClick'" options='map.infoWindowCustomClass.options' templateUrl="'templateUrl'" templateParameter="'templateParameter'")

Here is the coffeescript of the map object:

         zoom: 2
          pan:true
          center: 
            latitude: 40
            longitude: 0
          infoWindowCustomClass:
            options:
              boxClass:'dashboard-new-tooltip'
          options:
              minZoom:2
              maxZoom:11
              disableDefaultUI:true
              styles:[{
                        "featureType": "water",
                        "stylers": [
                          { "color": "#1B2028" }
                        ]
                      },{
                        "featureType": "poi",
                        "stylers": [
                          { "visibility": "off" }
                        ]
                      },{
                        "featureType": "road",
                        "stylers": [
                          { "visibility": "off" }
                        ]
                      }
                      ,{
                        "elementType": "labels",
                        "stylers": [
                          { "visibility": "off" }
                        ]
                      },{
                        "featureType": "transit",
                        "elementType": "all",
                        "stylers": [
                          { "visibility": "off" }
                        ]
                      },{
                        "featureType": "administrative",
                        "stylers": [
                          { "visibility": "off" }
                        ]
                      },{
                        "featureType": "landscape",
                        "stylers": [
                          { "color": "#4e555f" }
                        ]
                      }]

And here in my markers model(coffeescript):

$scope.map.markers.push
                    id:index
                    icon:'images/ignore/marker.png'
                    latitude: latlongs[index].latitude
                    longitude: latlongs[index].longitude
                    showWindow:false,
                    templateUrl:'views/maptooltip.html'
                    appName:latlongs[index].app
                    userName:latlongs[index].usr
                    city:latlongs[index].city
                    country:latlongs[index].country
                    options:
                      boxClass:'dashboard-new-tooltip'
                    click:()->
                      $scope.map = mapSettings.setMapCenter({
                          latitude:this.model.latitude-30
                          longitude:0
                        })
                      this.model.showWindow = true
                      this.model.templateParameter={}
                      this.model.templateParameter.appName = this.model.appName;
                      this.model.templateParameter.userName = this.model.userName;
                      this.model.templateParameter.city = this.model.city;
                      this.model.templateParameter.country = this.model.country;
                      $scope.$apply()
                    closeClick:()->
                      this.model.showWindow = false
                      $scope.$apply()

Can someone take a look at this, pretty please?

@nmccready
Copy link
Contributor

Well an easy check is putting a breakpoint in WindowsParentModel where it creates a child model. Check what scope.options is.

https://github.com/angular-ui/angular-google-maps/blob/master/src/coffee/directives/api/models/parent/windows-parent-model.coffee#L201-L202

See what the options are on line 201 vs 202. Then walk through the child.

@adityabalusu
Copy link
Author

Well. Putting a break point after Line:201 gives me this:

  this.optionsKey = Object { boxClass="dashboard-new-tooltip"}
  this.scope.options = Object { boxClass="dashboard-new-tooltip"}

This is the custom class which I wish to provide. But

  opts = Object { position=R, content=undefined}. 

As far as my understanding goes, I have followed the documentation on the site to upgrade. And this code was working fine before the upgrade. Can you point me in an appropriate direction?

@nmccready
Copy link
Contributor

Ahh I see your issue, the templateUrl and templateParameter is to a single template not a different one to each model. So do don't wrap your template attributes in double and single quotes.

@adityabalusu
Copy link
Author

Do you mean something like this:

 %ui-gmap-windows(show="'showWindow'" closeClick="'closeClick'" isIconVisibleOnClick="'isIconVisibleOnClick'" options="map.infoWindowCustomClass.options" templateUrl="map.templateUrl" templateParameter="map.templateParameter")

But this would be kinda counter productive because the templateParameters are different for different models and I would have to pass them and interpolate them in run time to display marker specific information when users click on the markers.

@nmccready
Copy link
Contributor

Everything gets passed through the template so it is unique. Did u try it?

@adityabalusu
Copy link
Author

I did try but it still does not work. The markers show up fine. But when I click them,No window opens and the console throws:

 InvalidValueError: setVisible: not a boolean

HAML:

 %ui-gmap-google-map(center='map.center' pan='map.pan' options='map.options' draggable='true' zoom='map.zoom')
  %ui-gmap-markers(models='map.markers' icon="'icon'" coords="'self'" click="'click'" events="'events'")
    %ui-gmap-windows(show="'showWindow'" closeClick="'closeClick'" isIconVisibleOnClick="'isIconVisibleOnClick'" options="infoWindowCustomClass.options" templateUrl="map.templateUrl" templateParameter="map.templateParameter")

Markers Model:

    $scope.map.markers.push({
            id: index,
            icon: 'images/ignore/marker.png',
            latitude: latlongs[index].latitude,
            longitude: latlongs[index].longitude,
            showWindow: false,
            infoWindowCustomClass:{
              options:{
                boxClass:'dashboard-new-tooltip'
              }
            },
            appName: latlongs[index].app,
            userName: latlongs[index].usr,
            city: latlongs[index].city,
            country: latlongs[index].country,
            options: { boxClass: 'dashboard-new-tooltip' },
            click: function (context) {
              $scope.map = mapSettings.setMapCenter({
                latitude: context.model.latitude - 30,
                longitude: 0
              });
              context.model.showWindow = true;
              context.model.templateParameter = {};
              context.model.templateParameter.appName = context.model.appName;
              context.model.templateParameter.userName = context.model.userName;
              context.model.templateParameter.city = context.model.city;
              context.model.templateParameter.country = context.model.country;
              return $scope.$apply();
            },
            closeClick: function () {
              this.model.showWindow = false;
              return $scope.$apply();
            }
          })

Map Object:

  zoom: 2,
  pan: true,
  center: {
    latitude: 40,
    longitude: 0
  },
  templateUrl:'views/maptooltip.html',
  templateParameter:{message:'Test Message'},
  infoWindowCustomClass: { options: { boxClass: 'dashboard-new-tooltip' } },
  options: {
    minZoom: 2,
    maxZoom: 11,
    disableDefaultUI: true,
  }

@nmccready
Copy link
Contributor

To simplify your issue.. do you really need windows? There is not requirement to use windows inside of markers. (it is a convenience that is deceptive). It is way more performant to use window and only show one window at a time when needed. (not rendering them all in memory hidden like windows). Windows is only useful if you need them all shown immediately.

@adityabalusu
Copy link
Author

I don't need windows, but I need markers. Can I use window within markers instead of windows?

@nmccready
Copy link
Contributor

Yes search closed existing issues. This has been mentioned countless times.

@adityabalusu
Copy link
Author

Okay. Apologies for asking again. Thank you.

@nmccready
Copy link
Contributor

actually it is mentioned here (needs an example) http://angular-ui.github.io/angular-google-maps/#!/api#windows

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants