I'm creating an app in which I have a carpooling module. Now I want to display a map on which you'll be able to see carpoolers that are close to you. However, the map won't show..
I'm using a directive from
http://nlaplante.github.io/angular-google-maps/
I've added the google-maps to my dependencies and the directive is replaced by a google map, but it doesn't show anything.
I've got this directive in my view:
<google-map center="center"
zoom="zoom"
markers="markers"
style="height: 400px; width: 100%; display: block;">
</google-map>
I have all the variables in my controller:
$scope.center = {
latitude: 45,
longitude: -73
};
$scope.markers = [];
$scope.zoom = 8;
When I open firebug, I get following error:
Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map class="ng-isolate-scope ng-scope" center="center" zoom="zoom" markers="markers" style="height: 400px; width: 100%; display: block;">
I've tried a lot of things and searched for solutions, but none fixed my problem. Is there anyone that can help?
Thanks in advance. HS.
I think you have two problems:
Markers
<google-map center="center" zoom="zoom" draggable="true">
<markers models="markers" coords="'geometry'"></markers>
</google-map>
Where 'geometry' is the property where you got the coordinates. If the markers are coordinates as themselves you can set coords="'self'"
Style: Don't need to set the map styles at the directive. Rather than that you need to specify a css style
.angular-google-map-container {
height: 700px;
}
In the error message there is [googleMap, markers]
mentioned.
The new version requires to create a marker object inside of your google-map object and remove the directive from google-map.
Example:
<google-map center="center"
zoom="zoom"
markers="markers"
style="height: 400px; width: 100%; display: block;">
<markers>
<marker ng-repeat="marker in markers" coords="marker"></marker>
</markers>
</google-map>
I hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With