I get the error, `Can't find variable: google` when page auto-reloads after making a save

[dhruveonmars]

I get the error, Can't find variable: google in my browser console when the page auto-reloads after making a save, however when I reload the page in the browser manually, it usually loads fine, but not always.

Could this mean that it's trying to run the script before it's loaded the js?

This is my code;

@ViewChild('gmap') gmapElement: any;
map: google.maps.Map;

and then inside ngOnInit() {, I assign the lat/long to a variable, the styles, the marker image, and then the following:

var mapProp = new google.maps.Map(this.gmapElement.nativeElement, {
      zoom: 15,
      center: myPosition,
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: myMapStyles
    });

    var marker = new google.maps.Marker({
      position: myPosition,
      map: mapProp,
      icon: mapMarkerImage,
      title: 'Temporary Title'
    });

    var contentString = '<h3 class="sectiontitle fc-darkshade">Temporary popup title</h3>'+
      '<div class="fc-darkshade">'+
      '<p>Some details here or address?</p>'+
      '</div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    marker.addListener('click', function() {
      infowindow.open(mapProp, marker);
    });

Any help is appreciated

[dhruveonmars]

More information: Even when the error doesn't show up. Having this on the page, causes issues with other js libraries such as AOS. When I comment out my component with the google map, the rest of the page is fine

[michael-letcher]

Makes sure to have an API key. The guide is not good in that it ignores this a makes it seem that you don't need one. https://developers.google.com/maps/documentation/javascript/tutorial#api-key-billing-errors

[ultrasonicsoft]

@michael-letcher I have updated medium story wrt API key. Thanks!

@dhruveonmars I will check the issue. Can you share your github repo or gist?