Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular google-maps not displayed

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.

like image 230
Helena Standaert Avatar asked Dec 28 '13 13:12

Helena Standaert


2 Answers

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

like image 85
Lt. Avatar answered Oct 19 '22 23:10

Lt.


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.

like image 30
imwill Avatar answered Oct 20 '22 01:10

imwill