var mapApp = angular.module('googleMapApp', ['uiGmapgoogle-maps']);
mapApp.config(
['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
GoogleMapApiProviders.configure({
key: 'your Google Map api key',
v: '3', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization,places'
});
}]
);
mapApp.controller("MyCtrl",['$scope', 'uiGmapGoogleMapApi', function ($scope,uiGmapGoogleMapApi) {
angular.extend($scope, {
map: {
center: {
latitude: 35.681382,
longitude: 139.766084
},
options: {
maxZoom: 20,
minZoom: 3
},
zoom: 15,
control: {},
events: {
projection_changed: function (map, eventName, originalEventArgs) {
var styles = [
{
featureType: "all",
stylers: [
{ saturation: -80 }
]
},{
featureType: "water",
elementType: "geometry",
stylers: [
{ hue: "#00ffee" },
{ saturation: 90 }
]
},{
featureType: "poi.park",
elementType: "geometry",
stylers: [
{ hue: "#00ff00" },
{ saturation: 90 }
]
},{
featureType: "poi.park",
elementType: "labels",
stylers: [
{ hue: "#ff0000" },
{ saturation: 90 }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
}
}
});
uiGmapGoogleMapApi.then(function(maps) {});
}]);