Reputation: 143
I'm trying to develop an app using angularjs and a directive that I've found for instantiate GMaps: http://nlaplante.github.io/angular-google-maps/#!/usage. I follow all the steps but I cant get to render the map! it returns no errors!
in the HTML
<html ng-app="Maptesting">
<div ng-view></div>
<script src="app/map.js">
</script>
In the controller:
angular.module('Maptesting', ['google-maps'])
.controller('CtrlGMap', ['$scope', function($scope) {
$scope.center = {
latitude: 45,
longitude: -73
};
$scope.markers = [];
$scope.zoom = 8;
}])
Upvotes: 1
Views: 15165
Reputation: 84
Do you need to use refresh="!isMapElementHidden"
?
It should work if you remove these property.
http://embed.plnkr.co/p9rXdx1GnmnuLKsEAMkE/preview
angular.js:
angular.module('Maptesting', ['google-maps'])
.controller('CtrlGMap', ['$scope', function($scope) {
$scope.center = {
latitude: 45,
longitude: -73
};
$scope.markers = [];
$scope.zoom = 8;
}])
index.html:
<html ng-app="Maptesting">
<body ng-controller="CtrlGMap">
<google-map center="center"
zoom="zoom"
markers="markers"
style="height: 400px; width: 100%; display: block;">
</google-map>
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
</script>
</body>
</html>
Upvotes: 0
Reputation: 27738
Different answer, but I felt google-maps-directive is harder for me to use. Thus, I have created a google maps angularjs directive called, ng-map for my own project. This does not require any Javascript coding for simple functionality.
it looks like this
<map zoom="11" center="[40.74, -74.18]">
<marker position="[40.74, -74.18]" />
<shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
<control name="overviewMap" opened="true" />
</map>
Upvotes: 5
Reputation: 2325
As zewt112 already mentioned, it can be resolved by adding
.angular-google-map-container {
height: 400px;
}
But beware that in latest version class name is exactly angular-google-map-container and not angular-google-maps-container
Upvotes: 0
Reputation: 320
I had this problem. The solution was to ensure that in your CSS you include a height value for the 'angular-google-map-container' class. You don't have to add this class to your HTML; it is already included in the Javascript for the angular-google-maps directive. Adding the height as an inline style will not work because this specific class is added added through transclusion within the directive.
.angular-google-maps-container {
height: 400px;
}
Upvotes: 6