How use initial google map in Angularjs controller

Question

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
      });
    }

  });

Jose Bagatelli · Accepted Answer · 2019-02-24 14:34:17Z

5

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.

edited Feb 24, 2019 at 14:34

Jose Bagatelli

1,4111 gold badge20 silver badges35 bronze badges

answered Jul 4, 2016 at 19:29

general666

1,0392 gold badges16 silver badges33 bronze badges

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

2 Comments

tandrewnichols Over a year ago

Useful answer although you're example is actually backwards.

Khurshid Ansari Over a year ago

Then how to initialize the map

Rob Schmuecker · Accepted Answer · 2015-08-19 09:44:51Z

3

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.

answered Aug 19, 2015 at 9:44

Rob Schmuecker

8,9642 gold badges21 silver badges34 bronze badges

Comments

Matej P. · Accepted Answer · 2015-08-19 15:04:22Z

1

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.

edited Aug 19, 2015 at 15:04

answered Aug 19, 2015 at 14:52

Matej P.

5,3921 gold badge30 silver badges45 bronze badges

Collectives™ on Stack Overflow

How use initial google map in Angularjs controller

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related