nerdkan nerdkan - 4 months ago 18
AngularJS Question

Ionic angularjs-google-maps TypeError when adding marker

I'm using the angularjs-google-maps directive by allenhwkim on github, I can't post a link because I'm a newbie.

I'm building my app on top of this Firebase social auth starter kit : https://market.ionic.io/starters/firebase-v3-auth-social-kit

I'm retrieving the data from Google Places API.

index.html only has a ion-nav-view inside body tag, where I want to show the map is "home" view. Here is how the part I'm trying to add the markers looks like, inside an ion-content:

<ng-map center="{{googleMaps.lat}}, {{googleMaps.lon}}"
zoom="13"
disable-default-u-i="true">
</ng-map>

<marker
ng-if="googleMaps.isLoading === false"
icon="img/me-marker.png"
position="{{[googleMaps.lat,googleMaps.lon]}}"></marker>

<marker
ng-if="googleMaps.isLoading === false"
clickable="true"
on-mousedown="showStationDetail(event,station)"
ng-repeat="station in googleMaps.results"
icon="img/me-marker.png"
position="{{[station.geometry.location.lat,station.geometry.location.lng]}}">
</marker>


I've put a console.log statement inside "GoogleController" and ng-if's at markers to make sure that $scope.map is initialized and results array is filled before adding markers:

$scope.$on('mapInitialized',function(event,map){
console.log('SCOPE.MAP INITIALIZED');
$scope.map = map;
});


Here is how the console looks like when I get the errors

One might think 60 markers are too many to add but I can't even add a single marker to my own location I get by using cordova geolocation plugin.

I've tried using ng-map.js instead of ng-map.min.js, no luck.

As far as I understand, "addObject" is a property of mapController, and mapController is null? I'm a beginner and you might laugh at me for this but I think it's because I'm not using index.html but home view (because I'm building my app on top of a Firebase social auth starter kit), but I don't know how to proceed, I'm stuck :/ I've tried doing everything from scratch by starting a new project, no luck either.

What might be the problem? I've tried other ways to implement Google Maps but all I get is a blank screen (even though I adjusted width and height to 100%).

Sorry if I made any mistakes, this is my first question on stackoverflow and I tried my best.

Answer

Markers should be inside <ng-map>:

<ng-map center="{{googleMaps.lat}}, {{googleMaps.lon}}"
    zoom="13"
    disable-default-u-i="true">

    <marker
      ng-if="googleMaps.isLoading === false"
      icon="img/me-marker.png"
      position="{{[googleMaps.lat,googleMaps.lon]}}"></marker>

    <marker
          ng-if="googleMaps.isLoading === false"
                clickable="true"
                on-mousedown="showStationDetail(event,station)"
                ng-repeat="station in googleMaps.results"
          icon="img/me-marker.png"
                position="{{[station.geometry.location.lat,station.geometry.location.lng]}}">
    </marker>
</ng-map>