CODEWITHSUNDEEP
angulargoogle-maps
Victoria Ruiz
Victoria Ruiz

Reputation: 5013

Problems with Google Maps API after navigating away from the page that uses it, in Angular 5

I am working on a website that promotes events, using Angular 5. In short, my site has the following pages:

When I visit the event detail, after navigating twice (using standard Angular router), I get an error with initMap, which I use in the event detail. This happens no matter where I navigate to, on the second page I go to after the event detail. So I can do: Event detail -> Home -> Privacy || Event Detail -> Settings -> Search || any other combination, and I always get the error.

The error that comes up says:

core.js:1350 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null
TypeError: Cannot read property 'firstChild' of null
    at Object._.Sf (js?libraries=places&sensor=false&key=AIzaSyAX_2XrKSeS99ldBXSt_ffRfDtKBj9S2wI:83)
    at new Wf (js?libraries=places&sensor=false&key=AIzaSyAX_2XrKSeS99ldBXSt_ffRfDtKBj9S2wI:84)
    at EventBuyComponent.initMap (event-buy.component.ts:184)
    at SafeSubscriber.eval [as _next] (event-buy.component.ts:120)
    at SafeSubscriber.__tryOrSetError (Subscriber.js:248)
    at SafeSubscriber.next (Subscriber.js:188)
    ...

I don't want to post a lot of code, so I'll start small:

initMap (in the event detail page, aka event-buy.component.ts): 

initMap() {
    if (this.event && this.event.location.coordinates) {
      var location = new google.maps.LatLng(this.event.location.coordinates[1], this.event.location.coordinates[0]);

      var mapCanvas = document.getElementById('map');
      var mapOptions = {
        center: location,
        zoom: 16,
        panControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        clickableIcons: false,
        mapTypeControl: false
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);

      var marker = new google.maps.Marker({
        icon: "/assets/img/marker-normal.png",
        position: location,
        map: map
      });

      this.mapInitialized = true;
    }
  }

This function runs after loading event data, within: 

this.route.data.subscribe((routeData: { data: Event }) => {
...
}

Weirdly, I don't have the problem after loading the map in the search page, whose code is similar enough for me not to share (I could if it helps tho).

Why is this happening? Why can a promise in the maps js file not work, after it worked 2 pages ago?

Upvotes: 0

Views: 113

Answers (1)

Karl Johan Vallner
Karl Johan Vallner

Reputation: 4310

It seems to me that you are trying to use route parameters from a child route, aka. for example, you are trying to get the detail page event id, from the list view. Although the code you presented does not state that this is the case, I suspect you might have a route resolver, etc. where you are using similar code...

Like this maybe

this._route.firstChild.snapshot.params['event-id']

In this case it fails, when you do not properly check if child routes exist and are initialized on your route. I have seen this error a few times on my team, and people find it hard to debug, because the code only gives error under specific routing.

I found a quick snippet, if this happens to be your case, on how we test if firstChild is initialized.

if ( this._route.firstChild && this._route.firstChild.snapshot.params['event-id']

Upvotes: 1

Related Questions