Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Google Maps / Google Maps Api 3 / Javascript

How To Initialize Google Maps API In Angular Without Using Any Directives?

Post a Comment
I am trying to initalize google maps in the application I am writing, I am using the places api for some of the functionalities which is working fine, Now I am trying to show a map

Solution 1:

Make sure to define ng-app on your html:

<html ng-app="mapApp">
 . . .
  <body ng-controller="MapController" ng-init="initMap()">
    <div id="map"></div>
  </body>
</html>

Then to initialize correctly your map on JS:

angular.module('mapApp', []);

angular
  .module('mapApp')
  .controller('MapController', MapController);

  function MapController($scope){

    $scope.initMap = function() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            center: new google.maps.LatLng(32.483, 16.084)
        });
    }

}

And give height and width to your id:

#map{
      height: 400px;
      width:  700px;
      border: 2px solid red;
 }

here you can find A Plunker I made which initializes a map without a directive.

Hope I've been helpful.


Post a Comment for "How To Initialize Google Maps API In Angular Without Using Any Directives?"