Having Issues with Google Maps in AngularJS when using <ng-view></ng-view>
Routing Configuration
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'homeController'
})
.when('/contact', {
templateUrl: 'contact.html',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
});
Initializing the Map
<div ng-controller="contactController" ng-init="loadScript()">
<div id="my-map" ng-init="initialize()"></div>
</div>
app.controller('contactController', function($scope, $http){
$scope.loadScript = function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDtwLGMk2mRH8pFkhJrRtJ0lTyT0PokK4Q&sensor=false&callback=initialize";
document.body.appendChild(script);
};
$scope.initialize = function () {
console.log("the map initialization works now");
var myLatlng = new google.maps.LatLng(51.5120, -0.12);
var mapOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: false,
mapTypeControl: false,
disableDoubleClickZoom: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
stylers: [{
hue: "#E16D65"
}, {
saturation: -40
}]
}, {
elementType: "geometry",
stylers: [{
lightness: 0
}, {
visibility: "simplified"
}]
}, {
featureType: "landscape",
stylers: [{
lightness: 100
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
},{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{
color: "#E16D65",
}]
},{
featureType: "road.local",
stylers: [
{ color: "#ff8c86" },
{ lightness: 75 }
]
},{
featureType: "administrative.locality",
elementType: "labels.text",
stylers: [
{ color: "#666666" },
{ weight: 0.4 }
]
},{
featureType: "poi.park",
stylers: [
{ lightness: 100 }
]
}
]};
var map = new google.maps.Map(document.getElementById("my-map"), mapOptions);
map.panBy(-100, 0);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addDomListener(window, 'scroll', function () {
var scrollY = $(window).scrollTop(),
scroll = map.get('scroll');
if (scroll) {
map.panBy(0, -((scrollY - scroll.y) / 3));
}
map.set('scroll', {
y: scrollY
});
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
};
});
Unfortunately, there is an issue displayed on the FirefoxDeveloperEdition console
Demo page