Angular google-maps not displayed

Question

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.

Answer 1

I think you have two problems:

1. 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'"

2. 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; }

Answer 2

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.