Search code examples
angulargoogle-mapsionic-frameworkangular-google-maps

Angular google maps don't load the tiles when i build my app, but markers work

In dev mode, my google map component (using angular google maps library, v17) works perfectly fine, i had to create a mapId from google cloud platform because otherwise, it says i can't use markers. But when i build my application with capacitor, the tiles don't load and i can't interact with the map, except for the markers and their infowindows, they work for some reason. I tried to debug in production but i don't see any kind of errror.

This is my dynamic library import script, in index.html:

(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
      v: "weekly",
      key: "apiKey",
      mapIds: ["customMapId"]
    });

And this is my component:

<div class="map-container" style="height: 100%;">
    <google-map #map height="100%" width="100%" [options]="mapOptions" mapId="customMapId" (tilesloaded)="onTilesLoaded()">
      @for (marker of markers; track marker) {
      <map-advanced-marker #markerElem="mapAdvancedMarker" [position]="marker ?? {lat: 0, lng: 0}"  [title]="marker.title"
        (mapClick)="onMarkerClick(markerElem)"></map-advanced-marker>
      }
      <map-info-window #infoWindow>info window</map-info-window>
    </google-map>
  </div>

@ViewChild(GoogleMap, { static: false }) map!: GoogleMap;

mapOptions: google.maps.MapOptions = {
    center: { lat: 40.421601, lng: -3.689524 },
    disableDefaultUI: true,
    zoom: 14
  }

I don't see anything wrong with my code and i don't have any clue on how to fix it, i can't find anything useful in the docs.

Here is also how i see the map when i build it and i test the app in a real device:

enter image description here

I tried removing the mapId from the google-map component, and if i do that, the map starts working again (except for the markers, because as i said, if i don't put a mapId, markers don't work), so looks like the problem is with the mapId i created, but i also don't see any problem with it. I removed any kind of restriction in case that could create the problem i'm having.
enter image description here

Solution

  • The problem was that i was using Type = Javascript for my Map ID in google cloud platform, which i thought it was correct since i was using ionic. I changed it to android and now it works perfectly, i assume that i'll need to create another one for iOS.