CODEWITHSUNDEEP
angularjsgoogle-maps
Ye Huang
Ye Huang

Reputation: 639

How use initial google map in Angularjs controller

I would like to implement below google sample inside my angular controller.

https://developers.google.com/maps/documentation/javascript/examples/map-simple

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

Wherein the load of google map api needs a initMap to be followed inside the window scope.

How should I do inside angular controller? Code below does not work:

angular.module('testApp')
  .controller('MainCtrl', function ($scope, $window) {

    $window.map;
    $window.initMap = function() {
      $window.map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }

  });

Upvotes: 4

Views: 10210

Answers (3)

general666
general666

Reputation: 1039

Add your API key and remove callback=initMap in:

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

Remember to load the maps library at the end of the <body></body> in your html page to make sure all your other libraries are loaded first.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY></script>

Then initialise the map manually calling the initMap function triggering it from somewhere in your code.

Just note that doing in this synchronous way your app will be blocked until the maps library is completely loaded which can slow down your application.

Upvotes: 5

Matej P.
Matej P.

Reputation: 5383

Manipulating DOM from angular controller is not the Angular way of doing things. Depends on your needs, but I suggest you to take a look at Angular Google Maps or Angularjs-Google-Maps AngularJs modules. They both provide set of directives, which you can use in your html code and then access map object exposed on scope in controller to manipulate your map.

Upvotes: 1

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Depending on your inclusion order of the maps library, you can either call it directly like this:

HTML: 

<div ng-app="testApp" id="map" ng-controller="MainCtrl"></div>

Javascript:

var app = angular.module('testApp', [])
    .controller('MainCtrl', function ($scope, $window) {
    $window.map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    });
});

Demo: http://jsfiddle.net/uxe4b9uu/

Alternatively you can get the maps to initialize on callback as you had suggested provided that you know you have loaded Angular before the map library.

Upvotes: 3

Related Questions