I am fairly new to Angular, and I am trying to use this to integrate google maps: https://github.com/allenhwkim/angularjs-google-maps
The problem I am having is when I try to get the maps instance using NgMap.getMap() When I console.log NgMap.getMap I am getting "could not find map". This is how my code looks:
partials/home.html:
<h1>practice locater</h1>
<ng-map id="map" center="[40.74, -74.18]"></ng-map>
Javascript:
var app = angular.module('RIThym',['ngResource','ngRoute','ngMap']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
app.controller('HomeCtrl',['$scope','$resource', 'NgMap',
function($scope, $resource, NgMap){
var Locations = $resource('/api/locations');
Locations.query(function(locations){
$scope.locations = locations;
});
var map = NgMap.getMap();
console.log(map);
NgMap.getMap().then(function(map){
console.log(map);
});
}]);
When the ng-map
directive has an id
attribute, the getMap
function must use that id
value as its first argument.
HTML
<h1>practice locater</h1>
<ng-map id="map" center="[40.74, -74.18]"></ng-map>
JS
//DO this
NgMap.getMap("map").then(function(map){
//NOT this
//NgMap.getMap().then(function(map){
console.log(map);
});
For more information, see NgMap Provider API Reference