javascript - Cannot pass dynamically map style in angular-google-maps -
javascript - Cannot pass dynamically map style in angular-google-maps -
i have issue. i'm getting styles dynamically services. styles arrays , check worked ok when added inline when i'm getting info dynamically map renders default styling.
for illustration here's 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 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 info can see in inspector when log console map not rendering selected style array google's default.
any ideas?
ps: if else statement works correctly, , options style array not.
update: if pass dynamic style array inline works, variable doesn't. tryid pass info straight (data.settings.theme.mapselected) thing.
plnkr: http://plnkr.co/edit/ktvcioqtaa9hhg5xc1e6?p=preview
well quite simple...
as info json angular wasn't render correctly information, simple solution covert info angular.fromjson().
so correction edit imported info this:
var stylearray = angular.fromjson(data.settings.theme.mapselected);
and work.
javascript angularjs google-maps angular-google-maps
Comments
Post a Comment