I am currently working for ionic app, and need to show a map of a place. I am using angular-google-map, and the map did show in the screen. The problem is I couldn't get the marker on the map! I am really running out of idea on why the marker did not show up.
My html code:
<div id="map_canvas" ng-controller="mapCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-marker coords="marker.coords" idkey="'1'"></ui-gmap-marker>
</ui-gmap-google-map>
</div>
My controllers.js code:
.controller('mapCtrl', function($scope) {
$scope.map = { center: { latitude: 3.133098, longitude: 101.6816 }, zoom: 16};
$scope.marker = {coords: { latitude: 3.133098, longitude: 101.6816 } };
});
I solved it by first completely re-install angular-google-maps, and adding the following three lines:
<script src="lib/lodash/lodash.js"></script>
<script src="lib/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="lib/angular-google-maps/dist/angular-google-maps.js"></script>
I've got everything mix-up. Decided to start clean, and paid close attention on error console. Now both marker and map work just fine!