current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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 on a page but the map never shows up. i do not get any error on the console when I use the following code.

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=mykey&libraries=places"></script>

mapview.html

<div ng-controller="MapViewController as mapctrl" ng-init="initialize()">
<div class="container">

  <div class="row">



<div id="map"></div>

</div>

<div ui-view></div>
</div>
</div>

mapViewController.js

(function(angular) {
    angular.module('myapp').controller('MapViewController', ['$state','$http','$stateParams','$window','$route','$document','$localStorage','$scope','$location', function($state,$http,$stateParams,$window,$route,$document,$localStorage,$scope,$location) {

      $scope.initialize = function(){
        console.log("log");
          var mapOptions = {
              zoom: 11,
              center: {lat: -34.397, lng: 150.644},
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          var map = new google.maps.Map(document.getElementById('map'), mapOptions);
       };

      }]);
      })(angular)

I get the log message when the contoller is initialized but the map doesn't show on the page. I would like to know how can I make it possible without using any directive.

share|improve this question
    
That's weird, can you share you app-module code? Also, did you define ng-app? Also, did you give height and width to your map id? – AndreaM16 Sep 13 at 11:39
up vote 3 down vote accepted

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.

share|improve this answer
    
edit: I deleted immediate (function {})(); It gives issues with Controllers. – AndreaM16 Sep 13 at 11:52
    
How can I miss that, just the height and width and boom! – Rishabh Sep 13 at 13:06
    
Happens. Glad you fixed that. – AndreaM16 Sep 13 at 13:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.