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.

Pleases provide more details or a full code example

imwill
– imwill

2014-01-20 23:26:20 +00:00
Commented Jan 20, 2014 at 23:26 — imwill
– imwill, Commented Jan 20, 2014 at 23:26

Matthew Rankin · Accepted Answer · 2014-08-19 10:25:00Z

8

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

edited Aug 19, 2014 at 10:25

Matthew Rankin

461k39 gold badges130 silver badges166 bronze badges

answered Jun 24, 2014 at 8:36

Lt.

1,2682 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

imwill · Accepted Answer · 2014-01-09 15:41:01Z

3

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.

answered Jan 9, 2014 at 15:41

imwill

6189 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular google-maps not displayed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related