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 enter image description here

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

nothing shown to help anyone troubleshoot. Is map being initialized in a directive? — charlietfl
– charlietfl, Commented Dec 14, 2014 at 23:50
@charlietfl Thanks for looking the issue. here is the website athimannil.com where I am using the map. — Mo.
– Mo., Commented Dec 14, 2014 at 23:52
link to website doesn't do much, nobody will pour through all your files. Post relevant code in the question — charlietfl
– charlietfl, Commented Dec 14, 2014 at 23:53
did you include maps api script? Is the ng-init within scope of contactController ? — charlietfl
– charlietfl, Commented Dec 15, 2014 at 0:04
I think you should load the google map api initially instead of loading script dynamically. Just put it inside your home page and before angular.min.js. If you really want to dynamically loading it, I suggest you take a look at this project github.com/marcoslin/angularAMD . It also has one example with dynamically loading google map, but this must be used using requirejs to handle lazy loading in Angularjs — themyth92
– themyth92, Commented Dec 15, 2014 at 9:13

AndreaM16 · Accepted Answer · 2015-05-18 18:02:22Z

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.

answered May 18, 2015 at 18:02

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mo. Over a year ago

@AndreaM15 I have fixed it in another way however Thanks for your answer, I will try your answer as well

Collectives™ on Stack Overflow

Google Maps not working in AngularJS when use $route

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related