I’m also trying my luck on stackoverflow, but just to increase visibility I will give here a shot. Here is the link to that:
I’m using the angularjs-google-maps directive by allenhwkim on github, here is the link:
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%).
Thanks in advance.