I'm trying to develop an app using angularjs and a directive that I've found for instantiate GMaps: !/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;
}])
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;
}])
- are you loading lodash.underscore.js ? It seems you need that script, though it should throw an error if you don't have it. info here – zok Commented Jun 11, 2014 at 14:26
4 Answers
Reset to default 6I 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;
}
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>
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
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/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./maps/api/js?sensor=false&language=en"></script>
</script>
</body>
</html>