CODEWITHSUNDEEP
angularangular-google-maps
AngularM
AngularM

Reputation: 16628

Does anyone know how to add google maps to an angular 2 app?

Does anyone know how to add google maps to an angular 2 app ?

I'm currently linking to it in my index.html page like so:

   <script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script>

But I get this console error when using it in my angular 2 component:

system.src.js:1061 GET http://localhost:3000/angular2-google-maps/core 404 (Not Found)

This is the screen shot of my console:

enter image description here

system config:

System.config({
  packages: {      
    app: {
      format: 'register',
      defaultExtension: 'js'
    },
    'angular2-google-maps': { defaultExtension: 'js' }
  }
});
System.import('app/boot')
      .then(null, console.error.bind(console));

Upvotes: 2

Views: 1490

Answers (2)

Muthu17
Muthu17

Reputation: 1541

After a Long reaserch I found the following solution,

Once we installed Angular2-google-maps we forgot to map js file in our config.

Open Your systemjs.config.js

And Add 'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js' in your map directory.

My Code :

map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
     'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js'
    },

It may help someone. Thanks!.

Upvotes: 8

yurzui
yurzui

Reputation: 214047

I think that you forgot to add it to your system.js config:

  var packages = {
    ...
    'angular2-google-maps':       { defaultExtension: 'js' } <== this line
  };

See also http://angular-maps.com/docs/getting-started.html#angular2-google-maps-setup (Section Update systemjs.config.js)

It works only with angular2^rc.X

Upvotes: 1

Related Questions