initializing the google map api in angularjs function

Question

I'm trying to initialize the google maps init function from a function, the working of function is to add a new div tag which will contain a map. I tried code written in commented area below inside a function but it's not working but its working outside the function.

app.controller('controller1', function($scope, $http, $window) {

$scope.addMapPanel = function() {

    var ref_div = angular.element(document.querySelector('#ref_div'));

    var map_div = angular.element(document.querySelector('#map_div'));

    if(map_div.length){
        console.log('exist');
    }else{
        console.log('doesnot');
        ref_div.append('<div class="col-md-6" id="map_div"></div>');
    }

    /*$scope.initialize = function() {
      var map = new google.maps.Map(document.getElementById('map_div'), {
         center: {lat: -34.397, lng: 150.644},
         zoom: 8
      });
   }

    google.maps.event.addDomListener(window, 'load', $scope.initialize);*/

  };
});

similar type answer : How do I add google map in angular.js controller?

Tah · Accepted Answer · 2017-03-24 00:32:35Z

You still need to have the DomListener call some function once that library has been loaded. From there, just check to see if the div exists. If not, you need to append it and then initialize a map onto that div.

However, I would recommend using directives for DOM interaction, as that is where View logic should exist in the MVC architecture. Plus, it allows reuse.

angular.module('app', []).
controller('mapController', function($scope) {
    $scope.initialize = function () {
      
      var ref_div = angular.element(document.querySelector('#ref_div'));

      var map_div = angular.element(document.querySelector('#map_div'));

      if(map_div.length){
        var map = new google.maps.Map(document.getElementById('map_div'), {
           center: {lat: -34.397, lng: 150.644},
           zoom: 8
        });
      }else{
          ref_div.append('<div class="col-md-6" id="map_div"></div>');
          var map = new google.maps.Map(document.getElementById('map_div'), {
           center: {lat: -34.397, lng: 150.644},
           zoom: 8
        });
      }
    };

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

});

#map_div {
   width: 150px;
   height:  150px;
 }

<div id="ref_div" ng-app="app" ng-controller="mapController">
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js">
</script>

Collectives™ on Stack Overflow

initializing the google map api in angularjs function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related