Subscribing to data within JS Google Maps

Question

I am trying to change the center of a map within a dynamic script. The issue is that I do get the data that I am subscribing to, but it does not change the center of the map. I tested this out by creating a setInterval() within the component and seeing if the data changes, after I execute the method outside the component. Here is an example of the code

https://codesandbox.io/s/joey-basic-gmaps-lw5d4

export class AppComponent implements OnInit, OnChanges {
  public markerLat = 39;
  public markerLng = -76;
  title = "CodeSandbox";
  private apiKey = environment.googleMapsAPIkey;

  constructor(private data: DataService) {
    const dynamicScripts = [
      "https://maps.googleapis.com/maps/api/js?key=" + this.apiKey
    ];
    for (var i = 0; i < dynamicScripts.length; i++) {
      const node = document.createElement("script");
      node.src = dynamicScripts[i];
      node.type = "text/javascript";
      node.async = true;
      node.charset = "utf-8";
      document.getElementsByTagName("head")[0].appendChild(node);
    }
  }
  ngOnInit() {
    this.data.markerLat.subscribe(markerLat => this.markerLat = markerLat);
    this.data.markerLng.subscribe(markerLng => this.markerLng = markerLng);
    setTimeout(() => {
      this.initMap();
    }, 1000);
  }
  ngOnChanges() {
    setTimeout(() => {
      this.initMap();
    }, 1000);
  }
  ngOnDestroy() {
    this.data.markerLat.subscribe(markerLat => this.markerLat = markerLat).unsubscribe();
    this.data.markerLng.subscribe(markerLng => this.markerLng = markerLng).unsubscribe();
  }
  initMap() {
    const google = window.google;

    const center = { lat: this.markerLat, lng: this.markerLng };
    const map = new google.maps.Map(document.getElementById("map"), {
      zoom: 8,
      center: center
    });
    const marker = new google.maps.Marker({ position: center, map: map });
  }
}

@Chellappanவ the market is visible... it just does not change positions — Jonathan, Jan 01 '20 at 04:08
@Chellappanவ I do not know exactly what u mean by that... can you show me — Jonathan, Jan 01 '20 at 04:13

score 1 · Accepted Answer · answered Jan 01 '20 at 04:32

1

Since you are getting data from asyn source the excution order of initMap will differ. Move your initMap method inside subscribe block. Use forkJoin to get lat and lng observable to get complete first.

Try this

    import { forkJoin } from 'rxjs';

    export class AppComponent implements OnInit, OnChanges {

    ngOnInit() {
       const latLng = forkJoin(
       this.data.markerLat,
       this.data.markerLng
       ).subscribe(([markerLat, markerLng])=>{
        this.markerLat = markerLat;
        this.markerLng = markerLng;
        this.initMap();
     })
   }
 }

answered Jan 01 '20 at 04:32

Chellappan வ

23,645
3
29
60

I see what you are doing here and it makes sense... however the map has failed to load and I get no error from the console – Jonathan Jan 01 '20 at 04:39
can you console inside subcribe method and see wheather you getting data or not? – Chellappan வ Jan 01 '20 at 04:44
It does not console anything... I don't think it reaches the method at all – Jonathan Jan 01 '20 at 04:54
you have to complete the observable to get value : https://codesandbox.io/s/joey-basic-gmaps-tf9h7?fontsize=14&hidenavigation=1&theme=dark – Chellappan வ Jan 01 '20 at 05:26
Check this for more: https://stackoverflow.com/questions/39722440/forkjoin-2-behaviorsubjects – Chellappan வ Jan 01 '20 at 05:26
So the issue is that I get the data but the map still does not change... check the codesandbox for the update – Jonathan Jan 01 '20 at 05:52
Did you see the console it throwing no API key error? – Chellappan வ Jan 01 '20 at 05:57
yes I removed mine from the environment.ts... do you have one? – Jonathan Jan 01 '20 at 05:58
do you see the issue? – Jonathan Jan 01 '20 at 06:12
can you change the location with the input boxes? – Jonathan Jan 01 '20 at 06:20
1

Can't you use setcenter method to change the center of the coordinate after map gets initialised – Chellappan வ Jan 01 '20 at 06:20
If yiu call initMap again and again it will create new instances everytime it's call.Instead of that you can create map once and use that instance to change center – Chellappan வ Jan 01 '20 at 06:22
the issue is that in my actual project I am doing this from a parent component, not the javascipt itself... I might have to think about this a little – Jonathan Jan 01 '20 at 06:25
You can get map instance using viewchild from parent component – Chellappan வ Jan 01 '20 at 06:53

Subscribing to data within JS Google Maps

1 Answers1