Cannot pass dynamically map style in angular-google-maps

问题

i have an issue. I'm getting styles dynamically from a services. Styles are arrays and check that all worked ok when added inline but when i'm getting the data dynamically the map renders the default styling.

For example here's my code:

 var styleArray = data.settings.Theme.mapSelected;
 if(data.settings.Theme.mapSelected != undefined) {
    $scope.mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      styles: styleArray
    };
 } else {
    $scope.mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
                    };
                  }

And here my html

<ui-gmap-google-map center='settings.Location.coords' zoom='12' options='mapOptions' doRebuildAll="true">
    <ui-gmap-marker idKey='settings.Content._id' coords='settings.marker.coords'></ui-gmap-marker>
</ui-gmap-google-map>

I'm getting correctly the data as i can see in the inspector when i log into console but map is not rendering the selected style array but google's default.

Any ideas?

ps: the if else statement works correctly, and also all the options as well only style array is not.

update: if i pass the dynamic style array inline it works, only with variable it doesn't. i tryid to pass the data directly (data.settings.Theme.mapSelected) but it does the some thing.

Plnkr: http://plnkr.co/edit/KtvcIoqTaa9HHG5Xc1E6?p=preview

回答1:

Well that was quite simple...

As the data was json angular wasn't render correctly the information, so the simple solution is to covert data with angular.fromJson().

So the correction is just edit the imported data like this:

var styleArray = angular.fromJson(data.settings.Theme.mapSelected);

And it will work.

来源：https://stackoverflow.com/questions/29487638/cannot-pass-dynamically-map-style-in-angular-google-maps

标签

javascript

angularjs

google-maps

angular-google-maps