Google Maps not working in AngularJS when use $route

Question

Google Maps not working in AngularJS when use <ng-view></ng-view>

Routing conf

app.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'homeController'
    })
    .when('/contact', {
      templateUrl: 'contact.html',
      controller: 'contactController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

Call initialize

<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("pandaram shariyavunillallo");
        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 the result shows like this in console on FirefoxDeveloperEdition

Demo page http://www.athimannil.com/

Answer 1

I had an issue like this one. I solved making some different things:

index.html:

<div ng-view=""></div>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=myKey"></script>

myMap.html:

<div class="fullmapContainer">
    <div id="fullmap-canvas"></div>
</div>
<script src="../scripts/custom/infos/google-maps/myDynamicMap.js"></script>

myMap.js:

angular.module('fullmap-canvas', [])
        .controller('FullmapController',[ 
                   $(document).ready(function (){

  var myCenter=new google.maps.LatLng(lat,lng);
  $(function initialize() {

  /*Beautiful map options*/

 function loadScript() {

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
  '&signed_in=true&callback=initialize';
  document.body.appendChild(script);
  }

  window.onload = loadScript;


  })]);

myMapController.js:

myApp.controller("FullmapController", ["$scope",function($scope){

 }]);

myRoutes.js:

myApp.config(function ($routeProvider) {
$routeProvider
.when('/myMap', {
      templateUrl: 'views/myMap.html',
      controller: 'FullmapController'
 })
  .otherwise({
     redirectTo: '/'
   });
})

Css:

#fullmap-canvas{height: 100%; width: 100%;}

Hope I've been helpfull.