Is it possible to adapt this into an isomorphic module?

[levarcooper]

I'm running Angular2 with Angular Universal. I'm running into issues because window is not defined. I haven't looked at the code yet but is it possible adapt the code to remove such dependencies? And is it something you'd want to work toward in the future?

[allenhwkim]

Thanks for reporting this.

It's only used here to load google maps api properly.

Not having idea yet, but meanwhile, any help or PR would be appreciated.

To explain it simple,

  addGoogleMapsApi(): void {
    window['ng2MapComponentRef'] = { zone: this.zone, componentFn: () => this.initializeMap()};
    window['initNg2Map'] = function() {
      window['ng2MapComponentRef'].zone.run(function() { window['ng2MapComponentRef'].componentFn(); });
    };
    if (!window['google'] && !document.querySelector('#ng2-map-api')) {
      let script = document.createElement( 'script' );
      script.id = 'ng2-map-api';

      // script.src = "https://maps.google.com/maps/api/js?callback=initNg2Map";
      let apiUrl = Ng2MapComponent['apiUrl'] || 'https://maps.google.com/maps/api/js';
      apiUrl += apiUrl.indexOf('?') ? '&' : '?';
      script.src = apiUrl + 'callback=initNg2Map';
      document.querySelector('body').appendChild(script);
    }
  }

1. insert <script> tag to the current document to load google map with callback initNg2Map
2. initNg2Map is a global window function to call Ng2MapComponent#initializeMap

Basically, It requires window and document to load Google Maps API properly. I am not sure how google maps api can be loaded without window and document at the moment.

As I said, any help would be highly appreciated.

[levarcooper]

Thanks for the speedy reply, Allen. For anyone using Angular Universal, here's a simple fix that worked for me. HTML <ng2-map *ngIf="documentReady"></ng2-map>

COMPONENT import { Component, OnInit } from '@angular/core'; import { isBrowser } from 'angular2-universal'; import { Ng2MapComponent } from 'ng2-map'; @Component({...}) export class FooComponent{ documentReady: boolean = false;

ngOnInit(){
    if(isBrowser){
        this.documentReady = true;
    }
}

})

As for contributing, I don't know how much help I can offer at this moment but this repository is for isomorphic google maps using reactjs. Looking at the portion of code that renders the map may be a good starting point for someone looking to solve the issue. I'll check back when things slow down for me if this hasn't been resolved.

[allenhwkim]

Thank you @levarcooper Let me learn angular2-universal meanwhile.

[allenhwkim]

@aitboudad would you look into this?

[aitboudad]

sure but we should wait until https://github.com/angular/angular/issues/13822 is implemented

[aloketewary]

I think now you can start development into this.