title: Initialize Google Map in AngularJS
body: <p>I am considering migrating from backbonejs to angularjs. </p>
  
  <p>In backbone I am able to initialize a view at which point I create an instance of google map. I can then pan/zoom/etc and switch between views and not lose the current state of the map.</p>
  
  <p>Given the following using angularjs:</p>
  
  <p>layout.html</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container-fluid" ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>map.html</p>
  
  <pre><code>&lt;div id="map_canvas" ng-controller="MapCtrl"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I was able to create a directive to render a map just fine. Problem is that it reloads the map each time I switch back to the map view.</p>
  
  <pre><code>&lt;map&gt;&lt;/map&gt;
  </code></pre>
  
  <p>So from what I am learning about Angular, I figured I would create a MapController and initialize the map there. No success.</p>
  
  <p>Bottom line is I need to async-init a google map and push data to it locally or remotely AND be able to navigate the app without RELOADING the map from scratch each time.</p>
  
  <p>Can someone suggest the correct approach?</p>
  
  <p>Thank you :)</p>
  
  <p><strong>Attempt Per Andy Joslin suggestion:</strong></p>
  
  <p><strong>In app.js:</strong></p>
  
  <pre><code>// Generated by CoffeeScript 1.3.3
  (function() {
    "use strict";
  
    angular.module("ofm", ["ofm.filters", "GoogleMaps", "ofm.directives"]).config([
      "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
        $routeProvider.when("/", {
          templateUrl: "partials/home"
        }).when("/map", {
          templateUrl: "partials/map",
          controller: MapCtrl
        }).otherwise({
          redirectTo: "/"
        });
        return $locationProvider.html5Mode(true);
      }
    ]);
  
  }).call(this);
  </code></pre>
  
  <p><strong>In services.js:</strong></p>
  
  <pre><code>angular.module('GoogleMaps', []).
    factory('wasMapInitialized', function() {
      console.log("inside service");
      var maps = 0;
  
      if (!maps) {
        maps += 1;
        return 0;
      } else {
        return 1;
      }
    });
  </code></pre>
  
  <p><strong>In controllers.js:</strong></p>
  
  <pre><code>function MapCtrl($scope) {
    if (!GoogleMaps.wasMapInitialized()) {
      var lat = 46.87916;
      var lng = -3.32910;
      var map_id = '#map';
      initialize(map_id, lat, lng);
    }
    function initialize(map_id, lat, lng) {
      var myOptions = {
        zoom : 8,
        center : new google.maps.LatLng(lat, lng),
        mapTypeId : google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map($(map_id)[0], myOptions);
    }
  }
  </code></pre>
  
  <p><strong>In map.html</strong></p>
  
  <pre><code>#map
  &lt;div ng-controller="MapCtrl"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>I get Error: Unknown provider: GoogleMapsProvider &lt;- GoogleMaps</strong></p>