Search code examples
angularjsgoogle-mapsng-map

NgMap error "could not find map"


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

Solution

  • 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