[map] minor enhancements

src/app/app.component.html

@@ -83,7 +83,7 @@
   <div class="main">
     <router-outlet></router-outlet>
     <button mat-fab class="map-button" color="primary" aria-label="map button" (click)="sampleMap.hidden = !sampleMap.hidden"><mat-icon>map</mat-icon></button>
-    @if (!sampleMap.hidden) {<map class="map"></map>}
+    <map class="map" [markers]="sampleMap.markers" [polygons]="sampleMap.polygons" [ngStyle]="{display:sampleMap.hidden?'none':'flex'}"></map>
     <div class="mobile-buffer">&nbsp;</div>
   </div>
 </div>

src/app/app.component.ts

@@ -78,7 +78,16 @@ export class AppComponent extends BaseComponent implements OnInit {
   private notification = inject(NotificationService);
   private tr = inject(TranslatePipe);
 
-  protected sampleMap = {hidden:true};
+  protected sampleMap = {
+    hidden:true,
+    markers: [
+      {position:{lat:1.55176,lng:110.33429},title:'Software Optima'}
+    ],
+    polygons: [
+      {paths: [{lat:1.551703,lng:110.334149},{lat:1.551703,lng:110.334409},{lat:1.55222,lng:110.33444},{lat:1.552223,lng:110.33417}],fillColor: "blue",strokeColor:'navy'},
+      {paths: [{lat:1.55222,lng:110.33413},{lat:1.55224,lng:110.33375},{lat:1.551432,lng:110.333715},{lat:1.551404,lng:110.334387},{lat:1.551685,lng:110.334395},{lat:1.551704,lng:110.334100}],fillColor: "red",strokeColor:'red'}
+    ]
+  };
 
   constructor(
     private router: Router,

src/index.html

@@ -18,19 +18,22 @@
   <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
   <script>
-    (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,'marker']+"");
-      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: "AIzaSyBLjiqPFrt0TDCiINtdhIvme8FPYMVJ3kQ"
-    });
-</script>
+      (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,'marker']+"");
+        for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);
+        e.set("language",JSON.parse(localStorage.getItem('@@STATE'))?.labels?.lang);
+        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: "AIzaSyBLjiqPFrt0TDCiINtdhIvme8FPYMVJ3kQ"
+      });
+  </script>
+  
 </body>
+
 </html>