angular, google maps. map not loading with template

Question

I am having trouble loading a google map, while using angular routes with a template. As the code currently stands if i navigate to "#/map" the google map does not show up and inspecting the element, the map information is not there but the template loads as the h1 tag 'Map' does load. However, if I take the code from my map template and put it into my index.html it works perfectly fine. Does anyone know why this is and how to fix it?

Here is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ski</title>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">


<ng-view></ng-view>

<!-- app and routes -->
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<!-- controllers -->
<script src="js/controllers/map.controller.js"></script>
</body>
</html>

This is my template for map.

<div>
  <h1> Map </h1>
  <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx">
  </script>
  <script type="text/javascript">
        function initialize() {
          var mapOptions = {
            center: { lat: -34.397, lng: 150.644},
            zoom: 8
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
             mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  <div id="map-canvas" style="width: 50%; height: 50%;"></div>
</div>

My angular module.

angular.module('Ski', ['ngRoute']);

My angular routes.

angular.module('Ski').config(function($routeProvider) {
   'use strict';
  $routeProvider
    .when('/home', {
      templateUrl: 'templates/home.html'
    })
    .when('/map', {
      templateUrl: 'templates/map.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

dfsq · Accepted Answer · 2015-05-15 07:57:31Z

The problem is that when map view is loaded window.load event has already occurred, so this line

google.maps.event.addDomListener(window, 'load', initialize);

won't invoke initialize function, because load event is not going to happen again.

Instead try to move map script into head section:

<head>
  <meta charset="utf-8">
  <title>Ski</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
</head>

and then write simple directive to initialize map in map template:

<div>
  <h1>Map</h1>
  <map-canvas id="map" style="width: 50%; height: 50%;"></map-canvas>
</div>

The mapCanvas directive will look then something like this:

angular.module('Ski').directive('mapCanvas', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      var mapOptions = {
        center: { lat: -34.397, lng: 150.644},
        zoom: 8
      };
      new google.maps.Map(element[0], mapOptions);
    }
  };
});

Collectives™ on Stack Overflow

angular, google maps. map not loading with template

1 Answer 1

Demo: http://plnkr.co/edit/370NBWS3YlTrGBqK7riT?p=preview

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://plnkr.co/edit/370NBWS3YlTrGBqK7riT?p=preview

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related