PageSourceSearch

https://geo-devrel-javascript-samples.web.app/

html geo-devrel-javascript-samples.web.app collected 2026-10-03 12:24:08 UTC 190,946 bytes, 6,102 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <title>JS Samples</title>
5    <meta
6      name="description"
7      content="An interactive playground for Google Maps Platform JavaScript samples."
8    />
9    <meta name="viewport" content="width=device-width, initial-scale=1" />
10    <meta name="robots" content="noindex" />
11    <style>
12      html,
13      body {
14        height: 100%;
15        margin: 0;
16        padding: 0;
17        font-family:
18          ui-sans-serif,
19          system-ui,
20          -apple-system,
21          BlinkMacSystemFont,
22          Segoe UI,
23          Roboto,
24          Helvetica Neue,
25          Arial,
26          Noto Sans,
27          sans-serif,
28          Apple Color Emoji,
29          Segoe UI Emoji,
30          Segoe UI Symbol,
31          Noto Color Emoji;
32      }
33
34      .card {
35        border: 1px solid #ccc;
36        border-radius: 6px;
37        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
38      }
39      .card-header {
40        margin: 0;
41        padding: 10px;
42        border-bottom: 1px solid #ccc;
43        border-radius: 6px 6px 0 0;
44        background: #f5f5f5;
45        font-weight: normal;
46      }
47      .card-footer {
48        padding: 10px;
49        display: flex;
50        gap: 4px;
51        flex-wrap: wrap;
52      }
53
54      .button {
55        appearance: none;
56        background-color: #1a73e8;
57        border: 1px solid #dadce0;
58        border-radius: 6px;
59        box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
60        box-sizing: border-box;
61        color: #fff;
62        cursor: pointer;
63        display: inline-block;
64        font-size: 14px;
65        line-height: 20px;
66        padding: 4px 12px;
67        position: relative;
68        text-align: center;
69        text-decoration: none;
70        user-select: none;
71        -webkit-user-select: none;
72        touch-action: manipulation;
73        vertical-align: middle;
74        white-space: nowrap;
75      }
76
77      .button:focus:not(:focus-visible):not(.focus-visible) {
78        box-shadow: none;
79        outline: none;
80      }
81
82      .button:hover {
83        background-color: #1765cc;
84      }
85
86      iframe {
87        border: 0;
88        flex-grow: 1;
89      }
90
91      #sidebar {
92        width: 300px;
93        overflow-y: auto;
94        overflow-x: hidden;
95        padding: 10px;
96        display: flex;
97        flex-direction: column;
98        gap: 10px;
99      }
100    </style>
101
102    
102<script>
103      function setIframe(src) {
104        document.getElementById("iframe").src = src;
105      }
106    </script>
106
107  </head>
108  <body>
109    <div style="display: flex; gap: 10px; height: 100vh">
110      <div id="sidebar">
111        <div class="card">
112          <h4 class="card-header">add-map</h4>
113          <div class="card-footer">
114            <button
115              class="button"
116              onclick="setIframe('./samples/playground.html?sample=add-map')"
117            >
118              Playground
119            </button>
120            <button
121              class="button"
122              onclick="setIframe('./samples/add-map/iframe/index.html')"
123            >
124              Iframe
125            </button>
126            <button
127              class="button"
128              onclick="setIframe('./samples/add-map/app/dist/index.html')"
129            >
130              App
131            </button>
132            <a
133              class="button"
134              href="https://github.com/googlemaps/js-samples/tree/main/samples/add-map"
135              >Code</a
136            >
137          </div>
138        </div>
139
140        <div class="card">
141          <h4 class="card-header">advanced-markers-accessibility</h4>
142          <div class="card-footer">
143            <button
144              class="button"
145              onclick="setIframe('./samples/playground.html?sample=advanced-markers-accessibility')"
146            >
147              Playground
148            </button>
149            <button
150              class="button"
151              onclick="setIframe('./samples/advanced-markers-accessibility/iframe/index.html')"
152            >
153              Iframe
154            </button>
155            <button
156              class="button"
157              onclick="setIframe('./samples/advanced-markers-accessibility/app/dist/index.html')"
158            >
159              App
160            </button>
161            <a
162              class="button"
163              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-accessibility"
164              >Code</a
165            >
166          </div>
167        </div>
168
169        <div class="card">
170          <h4 class="card-header">advanced-markers-altitude</h4>
171          <div class="card-footer">
172            <button
173              class="button"
174              onclick="setIframe('./samples/playground.html?sample=advanced-markers-altitude')"
175            >
176              Playground
177            </button>
178            <button
179              class="button"
180              onclick="setIframe('./samples/advanced-markers-altitude/iframe/index.html')"
181            >
182              Iframe
183            </button>
184            <button
185              class="button"
186              onclick="setIframe('./samples/advanced-markers-altitude/app/dist/index.html')"
187            >
188              App
189            </button>
190            <a
191              class="button"
192              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-altitude"
193              >Code</a
194            >
195          </div>
196        </div>
197
198        <div class="card">
199          <h4 class="card-header">advanced-markers-animation</h4>
200          <div class="card-footer">
201            <button
202              class="button"
203              onclick="setIframe('./samples/playground.html?sample=advanced-markers-animation')"
204            >
205              Playground
206            </button>
207            <button
208              class="button"
209              onclick="setIframe('./samples/advanced-markers-animation/iframe/index.html')"
210            >
211              Iframe
212            </button>
213            <button
214              class="button"
215              onclick="setIframe('./samples/advanced-markers-animation/app/dist/index.html')"
216            >
217              App
218            </button>
219            <a
220              class="button"
221              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-animation"
222              >Code</a
223            >
224          </div>
225        </div>
226
227        <div class="card">
228          <h4 class="card-header">advanced-markers-basic-style</h4>
229          <div class="card-footer">
230            <button
231              class="button"
232              onclick="setIframe('./samples/playground.html?sample=advanced-markers-basic-style')"
233            >
234              Playground
235            </button>
236            <button
237              class="button"
238              onclick="setIframe('./samples/advanced-markers-basic-style/iframe/index.html')"
239            >
240              Iframe
241            </button>
242            <button
243              class="button"
244              onclick="setIframe('./samples/advanced-markers-basic-style/app/dist/index.html')"
245            >
246              App
247            </button>
248            <a
249              class="button"
250              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-basic-style"
251              >Code</a
252            >
253          </div>
254        </div>
255
256        <div class="card">
257          <h4 class="card-header">advanced-markers-collision</h4>
258          <div class="card-footer">
259            <button
260              class="button"
261              onclick="setIframe('./samples/playground.html?sample=advanced-markers-collision')"
262            >
263              Playground
264            </button>
265            <button
266              class="button"
267              onclick="setIframe('./samples/advanced-markers-collision/iframe/index.html')"
268            >
269              Iframe
270            </button>
271            <button
272              class="button"
273              onclick="setIframe('./samples/advanced-markers-collision/app/dist/index.html')"
274            >
275              App
276            </button>
277            <a
278              class="button"
279              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-collision"
280              >Code</a
281            >
282          </div>
283        </div>
284
285        <div class="card">
286          <h4 class="card-header">advanced-markers-draggable</h4>
287          <div class="card-footer">
288            <button
289              class="button"
290              onclick="setIframe('./samples/playground.html?sample=advanced-markers-draggable')"
291            >
292              Playground
293            </button>
294            <button
295              class="button"
296              onclick="setIframe('./samples/advanced-markers-draggable/iframe/index.html')"
297            >
298              Iframe
299            </button>
300            <button
301              class="button"
302              onclick="setIframe('./samples/advanced-markers-draggable/app/dist/index.html')"
303            >
304              App
305            </button>
306            <a
307              class="button"
308              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-draggable"
309              >Code</a
310            >
311          </div>
312        </div>
313
314        <div class="card">
315          <h4 class="card-header">advanced-markers-graphics</h4>
316          <div class="card-footer">
317            <button
318              class="button"
319              onclick="setIframe('./samples/playground.html?sample=advanced-markers-graphics')"
320            >
321              Playground
322            </button>
323            <button
324              class="button"
325              onclick="setIframe('./samples/advanced-markers-graphics/iframe/index.html')"
326            >
327              Iframe
328            </button>
329            <button
330              class="button"
331              onclick="setIframe('./samples/advanced-markers-graphics/app/dist/index.html')"
332            >
333              App
334            </button>
335            <a
336              class="button"
337              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-graphics"
338              >Code</a
339            >
340          </div>
341        </div>
342
343        <div class="card">
344          <h4 class="card-header">advanced-markers-html</h4>
345          <div class="card-footer">
346            <button
347              class="button"
348              onclick="setIframe('./samples/playground.html?sample=advanced-markers-html')"
349            >
350              Playground
351            </button>
352            <button
353              class="button"
354              onclick="setIframe('./samples/advanced-markers-html/iframe/index.html')"
355            >
356              Iframe
357            </button>
358            <button
359              class="button"
360              onclick="setIframe('./samples/advanced-markers-html/app/dist/index.html')"
361            >
362              App
363            </button>
364            <a
365              class="button"
366              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-html"
367              >Code</a
368            >
369          </div>
370        </div>
371
372        <div class="card">
373          <h4 class="card-header">advanced-markers-html-simple</h4>
374          <div class="card-footer">
375            <button
376              class="button"
377              onclick="setIframe('./samples/playground.html?sample=advanced-markers-html-simple')"
378            >
379              Playground
380            </button>
381            <button
382              class="button"
383              onclick="setIframe('./samples/advanced-markers-html-simple/iframe/index.html')"
384            >
385              Iframe
386            </button>
387            <button
388              class="button"
389              onclick="setIframe('./samples/advanced-markers-html-simple/app/dist/index.html')"
390            >
391              App
392            </button>
393            <a
394              class="button"
395              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-html-simple"
396              >Code</a
397            >
398          </div>
399        </div>
400
401        <div class="card">
402          <h4 class="card-header">advanced-markers-simple</h4>
403          <div class="card-footer">
404            <button
405              class="button"
406              onclick="setIframe('./samples/playground.html?sample=advanced-markers-simple')"
407            >
408              Playground
409            </button>
410            <button
411              class="button"
412              onclick="setIframe('./samples/advanced-markers-simple/iframe/index.html')"
413            >
414              Iframe
415            </button>
416            <button
417              class="button"
418              onclick="setIframe('./samples/advanced-markers-simple/app/dist/index.html')"
419            >
420              App
421            </button>
422            <a
423              class="button"
424              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-simple"
425              >Code</a
426            >
427          </div>
428        </div>
429
430        <div class="card">
431          <h4 class="card-header">advanced-markers-zoom</h4>
432          <div class="card-footer">
433            <button
434              class="button"
435              onclick="setIframe('./samples/playground.html?sample=advanced-markers-zoom')"
436            >
437              Playground
438            </button>
439            <button
440              class="button"
441              onclick="setIframe('./samples/advanced-markers-zoom/iframe/index.html')"
442            >
443              Iframe
444            </button>
445            <button
446              class="button"
447              onclick="setIframe('./samples/advanced-markers-zoom/app/dist/index.html')"
448            >
449              App
450            </button>
451            <a
452              class="button"
453              href="https://github.com/googlemaps/js-samples/tree/main/samples/advanced-markers-zoom"
454              >Code</a
455            >
456          </div>
457        </div>
458
459        <div class="card">
460          <h4 class="card-header">aerial-rotation</h4>
461          <div class="card-footer">
462            <button
463              class="button"
464              onclick="setIframe('./samples/playground.html?sample=aerial-rotation')"
465            >
466              Playground
467            </button>
468            <button
469              class="button"
470              onclick="setIframe('./samples/aerial-rotation/iframe/index.html')"
471            >
472              Iframe
473            </button>
474            <button
475              class="button"
476              onclick="setIframe('./samples/aerial-rotation/app/dist/index.html')"
477            >
478              App
479            </button>
480            <a
481              class="button"
482              href="https://github.com/googlemaps/js-samples/tree/main/samples/aerial-rotation"
483              >Code</a
484            >
485          </div>
486        </div>
487
488        <div class="card">
489          <h4 class="card-header">aerial-simple</h4>
490          <div class="card-footer">
491            <button
492              class="button"
493              onclick="setIframe('./samples/playground.html?sample=aerial-simple')"
494            >
495              Playground
496            </button>
497            <button
498              class="button"
499              onclick="setIframe('./samples/aerial-simple/iframe/index.html')"
500            >
501              Iframe
502            </button>
503            <button
504              class="button"
505              onclick="setIframe('./samples/aerial-simple/app/dist/index.html')"
506            >
507              App
508            </button>
509            <a
510              class="button"
511              href="https://github.com/googlemaps/js-samples/tree/main/samples/aerial-simple"
512              >Code</a
513            >
514          </div>
515        </div>
516
517        <div class="card">
518          <h4 class="card-header">boundaries-choropleth</h4>
519          <div class="card-footer">
520            <button
521              class="button"
522              onclick="setIframe('./samples/playground.html?sample=boundaries-choropleth')"
523            >
524              Playground
525            </button>
526            <button
527              class="button"
528              onclick="setIframe('./samples/boundaries-choropleth/iframe/index.html')"
529            >
530              Iframe
531            </button>
532            <button
533              class="button"
534              onclick="setIframe('./samples/boundaries-choropleth/app/dist/index.html')"
535            >
536              App
537            </button>
538            <a
539              class="button"
540              href="https://github.com/googlemaps/js-samples/tree/main/samples/boundaries-choropleth"
541              >Code</a
542            >
543          </div>
544        </div>
545
546        <div class="card">
547          <h4 class="card-header">boundaries-click-event</h4>
548          <div class="card-footer">
549            <button
550              class="button"
551              onclick="setIframe('./samples/playground.html?sample=boundaries-click-event')"
552            >
553              Playground
554            </button>
555            <button
556              class="button"
557              onclick="setIframe('./samples/boundaries-click-event/iframe/index.html')"
558            >
559              Iframe
560            </button>
561            <button
562              class="button"
563              onclick="setIframe('./samples/boundaries-click-event/app/dist/index.html')"
564            >
565              App
566            </button>
567            <a
568              class="button"
569              href="https://github.com/googlemaps/js-samples/tree/main/samples/boundaries-click-event"
570              >Code</a
571            >
572          </div>
573        </div>
574
575        <div class="card">
576          <h4 class="card-header">boundaries-simple</h4>
577          <div class="card-footer">
578            <button
579              class="button"
580              onclick="setIframe('./samples/playground.html?sample=boundaries-simple')"
581            >
582              Playground
583            </button>
584            <button
585              class="button"
586              onclick="setIframe('./samples/boundaries-simple/iframe/index.html')"
587            >
588              Iframe
589            </button>
590            <button
591              class="button"
592              onclick="setIframe('./samples/boundaries-simple/app/dist/index.html')"
593            >
594              App
595            </button>
596            <a
597              class="button"
598              href="https://github.com/googlemaps/js-samples/tree/main/samples/boundaries-simple"
599              >Code</a
600            >
601          </div>
602        </div>
603
604        <div class="card">
605          <h4 class="card-header">boundaries-text-search</h4>
606          <div class="card-footer">
607            <button
608              class="button"
609              onclick="setIframe('./samples/playground.html?sample=boundaries-text-search')"
610            >
611              Playground
612            </button>
613            <button
614              class="button"
615              onclick="setIframe('./samples/boundaries-text-
615search/iframe/index.html')"
616            >
617              Iframe
618            </button>
619            <button
620              class="button"
621              onclick="setIframe('./samples/boundaries-text-search/app/dist/index.html')"
622            >
623              App
624            </button>
625            <a
626              class="button"
627              href="https://github.com/googlemaps/js-samples/tree/main/samples/boundaries-text-search"
628              >Code</a
629            >
630          </div>
631        </div>
632
633        <div class="card">
634          <h4 class="card-header">circle-simple</h4>
635          <div class="card-footer">
636            <button
637              class="button"
638              onclick="setIframe('./samples/playground.html?sample=circle-simple')"
639            >
640              Playground
641            </button>
642            <button
643              class="button"
644              onclick="setIframe('./samples/circle-simple/iframe/index.html')"
645            >
646              Iframe
647            </button>
648            <button
649              class="button"
650              onclick="setIframe('./samples/circle-simple/app/dist/index.html')"
651            >
652              App
653            </button>
654            <a
655              class="button"
656              href="https://github.com/googlemaps/js-samples/tree/main/samples/circle-simple"
657              >Code</a
658            >
659          </div>
660        </div>
661
662        <div class="card">
663          <h4 class="card-header">combining-data</h4>
664          <div class="card-footer">
665            <button
666              class="button"
667              onclick="setIframe('./samples/playground.html?sample=combining-data')"
668            >
669              Playground
670            </button>
671            <button
672              class="button"
673              onclick="setIframe('./samples/combining-data/iframe/index.html')"
674            >
675              Iframe
676            </button>
677            <button
678              class="button"
679              onclick="setIframe('./samples/combining-data/app/dist/index.html')"
680            >
681              App
682            </button>
683            <a
684              class="button"
685              href="https://github.com/googlemaps/js-samples/tree/main/samples/combining-data"
686              >Code</a
687            >
688          </div>
689        </div>
690
691        <div class="card">
692          <h4 class="card-header">conserve-map-on-scroll</h4>
693          <div class="card-footer">
694            <button
695              class="button"
696              onclick="setIframe('./samples/playground.html?sample=conserve-map-on-scroll')"
697            >
698              Playground
699            </button>
700            <button
701              class="button"
702              onclick="setIframe('./samples/conserve-map-on-scroll/iframe/index.html')"
703            >
704              Iframe
705            </button>
706            <button
707              class="button"
708              onclick="setIframe('./samples/conserve-map-on-scroll/app/dist/index.html')"
709            >
710              App
711            </button>
712            <a
713              class="button"
714              href="https://github.com/googlemaps/js-samples/tree/main/samples/conserve-map-on-scroll"
715              >Code</a
716            >
717          </div>
718        </div>
719
720        <div class="card">
721          <h4 class="card-header">control-bounds-restriction</h4>
722          <div class="card-footer">
723            <button
724              class="button"
725              onclick="setIframe('./samples/playground.html?sample=control-bounds-restriction')"
726            >
727              Playground
728            </button>
729            <button
730              class="button"
731              onclick="setIframe('./samples/control-bounds-restriction/iframe/index.html')"
732            >
733              Iframe
734            </button>
735            <button
736              class="button"
737              onclick="setIframe('./samples/control-bounds-restriction/app/dist/index.html')"
738            >
739              App
740            </button>
741            <a
742              class="button"
743              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-bounds-restriction"
744              >Code</a
745            >
746          </div>
747        </div>
748
749        <div class="card">
750          <h4 class="card-header">control-custom</h4>
751          <div class="card-footer">
752            <button
753              class="button"
754              onclick="setIframe('./samples/playground.html?sample=control-custom')"
755            >
756              Playground
757            </button>
758            <button
759              class="button"
760              onclick="setIframe('./samples/control-custom/iframe/index.html')"
761            >
762              Iframe
763            </button>
764            <button
765              class="button"
766              onclick="setIframe('./samples/control-custom/app/dist/index.html')"
767            >
768              App
769            </button>
770            <a
771              class="button"
772              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-custom"
773              >Code</a
774            >
775          </div>
776        </div>
777
778        <div class="card">
779          <h4 class="card-header">control-custom-state</h4>
780          <div class="card-footer">
781            <button
782              class="button"
783              onclick="setIframe('./samples/playground.html?sample=control-custom-state')"
784            >
785              Playground
786            </button>
787            <button
788              class="button"
789              onclick="setIframe('./samples/control-custom-state/iframe/index.html')"
790            >
791              Iframe
792            </button>
793            <button
794              class="button"
795              onclick="setIframe('./samples/control-custom-state/app/dist/index.html')"
796            >
797              App
798            </button>
799            <a
800              class="button"
801              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-custom-state"
802              >Code</a
803            >
804          </div>
805        </div>
806
807        <div class="card">
808          <h4 class="card-header">control-default</h4>
809          <div class="card-footer">
810            <button
811              class="button"
812              onclick="setIframe('./samples/playground.html?sample=control-default')"
813            >
814              Playground
815            </button>
816            <button
817              class="button"
818              onclick="setIframe('./samples/control-default/iframe/index.html')"
819            >
820              Iframe
821            </button>
822            <button
823              class="button"
824              onclick="setIframe('./samples/control-default/app/dist/index.html')"
825            >
826              App
827            </button>
828            <a
829              class="button"
830              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-default"
831              >Code</a
832            >
833          </div>
834        </div>
835
836        <div class="card">
837          <h4 class="card-header">control-disableUI</h4>
838          <div class="card-footer">
839            <button
840              class="button"
841              onclick="setIframe('./samples/playground.html?sample=control-disableUI')"
842            >
843              Playground
844            </button>
845            <button
846              class="button"
847              onclick="setIframe('./samples/control-disableUI/iframe/index.html')"
848            >
849              Iframe
850            </button>
851            <button
852              class="button"
853              onclick="setIframe('./samples/control-disableUI/app/dist/index.html')"
854            >
855              App
856            </button>
857            <a
858              class="button"
859              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-disableUI"
860              >Code</a
861            >
862          </div>
863        </div>
864
865        <div class="card">
866          <h4 class="card-header">control-options</h4>
867          <div class="card-footer">
868            <button
869              class="button"
870              onclick="setIframe('./samples/playground.html?sample=control-options')"
871            >
872              Playground
873            </button>
874            <button
875              class="button"
876              onclick="setIframe('./samples/control-options/iframe/index.html')"
877            >
878              Iframe
879            </button>
880            <button
881              class="button"
882              onclick="setIframe('./samples/control-options/app/dist/index.html')"
883            >
884              App
885            </button>
886            <a
887              class="button"
888              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-options"
889              >Code</a
890            >
891          </div>
892        </div>
893
894        <div class="card">
895          <h4 class="card-header">control-positioning</h4>
896          <div class="card-footer">
897            <button
898              class="button"
899              onclick="setIframe('./samples/playground.html?sample=control-positioning')"
900            >
901              Playground
902            </button>
903            <button
904              class="button"
905              onclick="setIframe('./samples/control-positioning/iframe/index.html')"
906            >
907              Iframe
908            </button>
909            <button
910              class="button"
911              onclick="setIframe('./samples/control-positioning/app/dist/index.html')"
912            >
913              App
914            </button>
915            <a
916              class="button"
917              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-positioning"
918              >Code</a
919            >
920          </div>
921        </div>
922
923        <div class="card">
924          <h4 class="card-header">control-positioning-labels</h4>
925          <div class="card-footer">
926            <button
927              class="button"
928              onclick="setIframe('./samples/playground.html?sample=control-positioning-labels')"
929            >
930              Playground
931            </button>
932            <button
933              class="button"
934              onclick="setIframe('./samples/control-positioning-labels/iframe/index.html')"
935            >
936              Iframe
937            </button>
938            <button
939              class="button"
940              onclick="setIframe('./samples/control-positioning-labels/app/dist/index.html')"
941            >
942              App
943            </button>
944            <a
945              class="button"
946              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-positioning-labels"
947              >Code</a
948            >
949          </div>
950        </div>
951
952        <div class="card">
953          <h4 class="card-header">control-replacement</h4>
954          <div class="card-footer">
955            <button
956              class="button"
957              onclick="setIframe('./samples/playground.html?sample=control-replacement')"
958            >
959              Playground
960            </button>
961            <button
962              class="button"
963              onclick="setIframe('./samples/control-replacement/iframe/index.html')"
964            >
965              Iframe
966            </button>
967            <button
968              class="button"
969              onclick="setIframe('./samples/control-replacement/app/dist/index.html')"
970            >
971              App
972            </button>
973            <a
974              class="button"
975              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-replacement"
976              >Code</a
977            >
978          </div>
979        </div>
980
981        <div class="card">
982          <h4 class="card-header">control-simple</h4>
983          <div class="card-footer">
984            <button
985              class="button"
986              onclick="setIframe('./samples/playground.html?sample=control-simple')"
987            >
988              Playground
989            </button>
990            <button
991              class="button"
992              onclick="setIframe('./samples/control-simple/iframe/index.html')"
993            >
994              Iframe
995            </button>
996            <button
997              class="button"
998              onclick="setIframe('./samples/control-simple/app/dist/index.html')"
999            >
1000              App
1001            </button>
1002            <a
1003              class="button"
1004              href="https://github.com/googlemaps/js-samples/tree/main/samples/control-simple"
1005              >Code</a
1006            >
1007          </div>
1008        </div>
1009
1010        <div class="card">
1011          <h4 class="card-header">controls-basic-map</h4>
1012          <div class="card-footer">
1013            <button
1014              class="button"
1015              onclick="setIframe('./samples/playground.html?sample=control
1015s-basic-map')"
1016            >
1017              Playground
1018            </button>
1019            <button
1020              class="button"
1021              onclick="setIframe('./samples/controls-basic-map/iframe/index.html')"
1022            >
1023              Iframe
1024            </button>
1025            <button
1026              class="button"
1027              onclick="setIframe('./samples/controls-basic-map/app/dist/index.html')"
1028            >
1029              App
1030            </button>
1031            <a
1032              class="button"
1033              href="https://github.com/googlemaps/js-samples/tree/main/samples/controls-basic-map"
1034              >Code</a
1035            >
1036          </div>
1037        </div>
1038
1039        <div class="card">
1040          <h4 class="card-header">custom-markers</h4>
1041          <div class="card-footer">
1042            <button
1043              class="button"
1044              onclick="setIframe('./samples/playground.html?sample=custom-markers')"
1045            >
1046              Playground
1047            </button>
1048            <button
1049              class="button"
1050              onclick="setIframe('./samples/custom-markers/iframe/index.html')"
1051            >
1052              Iframe
1053            </button>
1054            <button
1055              class="button"
1056              onclick="setIframe('./samples/custom-markers/app/dist/index.html')"
1057            >
1058              App
1059            </button>
1060            <a
1061              class="button"
1062              href="https://github.com/googlemaps/js-samples/tree/main/samples/custom-markers"
1063              >Code</a
1064            >
1065          </div>
1066        </div>
1067
1068        <div class="card">
1069          <h4 class="card-header">dds-datasets-point</h4>
1070          <div class="card-footer">
1071            <button
1072              class="button"
1073              onclick="setIframe('./samples/playground.html?sample=dds-datasets-point')"
1074            >
1075              Playground
1076            </button>
1077            <button
1078              class="button"
1079              onclick="setIframe('./samples/dds-datasets-point/iframe/index.html')"
1080            >
1081              Iframe
1082            </button>
1083            <button
1084              class="button"
1085              onclick="setIframe('./samples/dds-datasets-point/app/dist/index.html')"
1086            >
1087              App
1088            </button>
1089            <a
1090              class="button"
1091              href="https://github.com/googlemaps/js-samples/tree/main/samples/dds-datasets-point"
1092              >Code</a
1093            >
1094          </div>
1095        </div>
1096
1097        <div class="card">
1098          <h4 class="card-header">dds-datasets-polygon</h4>
1099          <div class="card-footer">
1100            <button
1101              class="button"
1102              onclick="setIframe('./samples/playground.html?sample=dds-datasets-polygon')"
1103            >
1104              Playground
1105            </button>
1106            <button
1107              class="button"
1108              onclick="setIframe('./samples/dds-datasets-polygon/iframe/index.html')"
1109            >
1110              Iframe
1111            </button>
1112            <button
1113              class="button"
1114              onclick="setIframe('./samples/dds-datasets-polygon/app/dist/index.html')"
1115            >
1116              App
1117            </button>
1118            <a
1119              class="button"
1120              href="https://github.com/googlemaps/js-samples/tree/main/samples/dds-datasets-polygon"
1121              >Code</a
1122            >
1123          </div>
1124        </div>
1125
1126        <div class="card">
1127          <h4 class="card-header">dds-datasets-polygon-click</h4>
1128          <div class="card-footer">
1129            <button
1130              class="button"
1131              onclick="setIframe('./samples/playground.html?sample=dds-datasets-polygon-click')"
1132            >
1133              Playground
1134            </button>
1135            <button
1136              class="button"
1137              onclick="setIframe('./samples/dds-datasets-polygon-click/iframe/index.html')"
1138            >
1139              Iframe
1140            </button>
1141            <button
1142              class="button"
1143              onclick="setIframe('./samples/dds-datasets-polygon-click/app/dist/index.html')"
1144            >
1145              App
1146            </button>
1147            <a
1148              class="button"
1149              href="https://github.com/googlemaps/js-samples/tree/main/samples/dds-datasets-polygon-click"
1150              >Code</a
1151            >
1152          </div>
1153        </div>
1154
1155        <div class="card">
1156          <h4 class="card-header">dds-datasets-polygon-colors</h4>
1157          <div class="card-footer">
1158            <button
1159              class="button"
1160              onclick="setIframe('./samples/playground.html?sample=dds-datasets-polygon-colors')"
1161            >
1162              Playground
1163            </button>
1164            <button
1165              class="button"
1166              onclick="setIframe('./samples/dds-datasets-polygon-colors/iframe/index.html')"
1167            >
1168              Iframe
1169            </button>
1170            <button
1171              class="button"
1172              onclick="setIframe('./samples/dds-datasets-polygon-colors/app/dist/index.html')"
1173            >
1174              App
1175            </button>
1176            <a
1177              class="button"
1178              href="https://github.com/googlemaps/js-samples/tree/main/samples/dds-datasets-polygon-colors"
1179              >Code</a
1180            >
1181          </div>
1182        </div>
1183
1184        <div class="card">
1185          <h4 class="card-header">dds-datasets-polyline</h4>
1186          <div class="card-footer">
1187            <button
1188              class="button"
1189              onclick="setIframe('./samples/playground.html?sample=dds-datasets-polyline')"
1190            >
1191              Playground
1192            </button>
1193            <button
1194              class="button"
1195              onclick="setIframe('./samples/dds-datasets-polyline/iframe/index.html')"
1196            >
1197              Iframe
1198            </button>
1199            <button
1200              class="button"
1201              onclick="setIframe('./samples/dds-datasets-polyline/app/dist/index.html')"
1202            >
1203              App
1204            </button>
1205            <a
1206              class="button"
1207              href="https://github.com/googlemaps/js-samples/tree/main/samples/dds-datasets-polyline"
1208              >Code</a
1209            >
1210          </div>
1211        </div>
1212
1213        <div class="card">
1214          <h4 class="card-header">dds-region-viewer</h4>
1215          <div class="card-footer">
1216            <button
1217              class="button"
1218              onclick="setIframe('./samples/playground.html?sample=dds-region-viewer')"
1219            >
1220              Playground
1221            </button>
1222            <button
1223              class="button"
1224              onclick="setIframe('./samples/dds-region-viewer/iframe/index.html')"
1225            >
1226              Iframe
1227            </button>
1228            <button
1229              class="button"
1230              onclick="setIframe('./samples/dds-region-viewer/app/dist/index.html')"
1231            >
1232              App
1233            </button>
1234            <a
1235              class="button"
1236              href="https://github.com/googlemaps/js-samples/tree/main/samples/dds-region-viewer"
1237              >Code</a
1238            >
1239          </div>
1240        </div>
1241
1242        <div class="card">
1243          <h4 class="card-header">deckgl-arclayer</h4>
1244          <div class="card-footer">
1245            <button
1246              class="button"
1247              onclick="setIframe('./samples/playground.html?sample=deckgl-arclayer')"
1248            >
1249              Playground
1250            </button>
1251            <button
1252              class="button"
1253              onclick="setIframe('./samples/deckgl-arclayer/iframe/index.html')"
1254            >
1255              Iframe
1256            </button>
1257            <button
1258              class="button"
1259              onclick="setIframe('./samples/deckgl-arclayer/app/dist/index.html')"
1260            >
1261              App
1262            </button>
1263            <a
1264              class="button"
1265              href="https://github.com/googlemaps/js-samples/tree/main/samples/deckgl-arclayer"
1266              >Code</a
1267            >
1268          </div>
1269        </div>
1270
1271        <div class="card">
1272          <h4 class="card-header">deckgl-points</h4>
1273          <div class="card-footer">
1274            <button
1275              class="button"
1276              onclick="setIframe('./samples/playground.html?sample=deckgl-points')"
1277            >
1278              Playground
1279            </button>
1280            <button
1281              class="button"
1282              onclick="setIframe('./samples/deckgl-points/iframe/index.html')"
1283            >
1284              Iframe
1285            </button>
1286            <button
1287              class="button"
1288              onclick="setIframe('./samples/deckgl-points/app/dist/index.html')"
1289            >
1290              App
1291            </button>
1292            <a
1293              class="button"
1294              href="https://github.com/googlemaps/js-samples/tree/main/samples/deckgl-points"
1295              >Code</a
1296            >
1297          </div>
1298        </div>
1299
1300        <div class="card">
1301          <h4 class="card-header">deckgl-tripslayer</h4>
1302          <div class="card-footer">
1303            <button
1304              class="button"
1305              onclick="setIframe('./samples/playground.html?sample=deckgl-tripslayer')"
1306            >
1307              Playground
1308            </button>
1309            <button
1310              class="button"
1311              onclick="setIframe('./samples/deckgl-tripslayer/iframe/index.html')"
1312            >
1313              Iframe
1314            </button>
1315            <button
1316              class="button"
1317              onclick="setIframe('./samples/deckgl-tripslayer/app/dist/index.html')"
1318            >
1319              App
1320            </button>
1321            <a
1322              class="button"
1323              href="https://github.com/googlemaps/js-samples/tree/main/samples/deckgl-tripslayer"
1324              >Code</a
1325            >
1326          </div>
1327        </div>
1328
1329        <div class="card">
1330          <h4 class="card-header">delete-vertex-menu</h4>
1331          <div class="card-footer">
1332            <button
1333              class="button"
1334              onclick="setIframe('./samples/playground.html?sample=delete-vertex-menu')"
1335            >
1336              Playground
1337            </button>
1338            <button
1339              class="button"
1340              onclick="setIframe('./samples/delete-vertex-menu/iframe/index.html')"
1341            >
1342              Iframe
1343            </button>
1344            <button
1345              class="button"
1346              onclick="setIframe('./samples/delete-vertex-menu/app/dist/index.html')"
1347            >
1348              App
1349            </button>
1350            <a
1351              class="button"
1352              href="https://github.com/googlemaps/js-samples/tree/main/samples/delete-vertex-menu"
1353              >Code</a
1354            >
1355          </div>
1356        </div>
1357
1358        <div class="card">
1359          <h4 class="card-header">directions-complex</h4>
1360          <div class="card-footer">
1361            <button
1362              class="button"
1363              onclick="setIframe('./samples/playground.html?sample=directions-complex')"
1364            >
1365              Playground
1366            </button>
1367            <button
1368              class="button"
1369              onclick="setIframe('./samples/directions-complex/iframe/index.html')"
1370            >
1371              Iframe
1372            </button>
1373            <button
1374              class="button"
1375              onclick="setIframe('./samples/directions-complex/app/dist/index.html')"
1376            >
1377              App
1378            </button>
1379            <a
1380              class="button"
1381              href="https://github.com/googlemaps/js-samples/tree/main/samples/directions-complex"
1382              >Code</a
1383            >
1384          </div>
1385        </div>
1386
1387        <div class="card">
1388          <h4 class="card-header">directions-draggable</h4>
1389          <div class="card-footer">
1390            <button
1391              class="button"
1392              onclick="setIframe('./samples/playground.html?sample=directions-draggable')"
1393            >
1394              Playground
1395            </button>
1396            <button
1397              class="button"
1398              onclick="setIframe('./samples/directions-draggable/iframe/index.html')"
1399            >
1400              Iframe
1401            </button>
1402            <button
1403              class="button"
1404              onclick="setIframe('./samples/directions-draggable/app/dist/index.html')"
1405            >
1406              App
1407            </button>
1408            <a
1409              class="button"
1410              href="https://github.com/googlemaps/js-samples/tree/main/samples/directions-draggable"
1411              >Code</a
1412            >
1413          </div>
1414        </div>
1415
1416        <div class="card">
1417          <h4 class="card-header">directions-panel</h4>
1418          <div class="card-footer">
1419            <button
1420              class="button"
1421              onclick="setIframe('./samples/playground.html?sample=directions-panel')"
1422            >
1423              Playground
1424            </button>
1425            <button
1426              class="button"
1427              onclick="setIframe('./samples/directions-panel/iframe/index.html')"
1428            >
1429              Iframe
1430            </button>
1431            <button
1432              class="button"
1433              onclick="setIframe('./samples/directions-panel/app/dist/index.html')"
1434            >
1435              App
1436            </button>
1437            <a
1438              class="button"
1439              href="https://github.com/googlemaps/js-samples/tree/main/samples/directions-panel"
1440              >Code</a
1441            >
1442          </div>
1443        </div>
1444
1445        <div class="card">
1446          <h4 class="card-header">directions-simple</h4>
1447          <div class="card-footer">
1448            <button
1449              class="button"
1450              onclick="setIframe('./samples/playground.html?sample=directions-simple')"
1451            >
1452              Playground
1453            </button>
1454            <button
1455              class="button"
1456              onclick="setIframe('./samples/directions-simple/iframe/index.html')"
1457            >
1458              Iframe
1459            </button>
1460            <button
1461              class="button"
1462              onclick="setIframe('./samples/directions-simple/app/dist/index.html')"
1463            >
1464              App
1465            </button>
1466            <a
1467              class="button"
1468              href="https://github.com/googlemaps/js-samples/tree/main/samples/directions-simple"
1469              >Code</a
1470            >
1471          </div>
1472        </div>
1473
1474        <div class="card">
1475          <h4 class="card-header">directions-travel-modes</h4>
1476          <div class="card-footer">
1477            <button
1478              class="button"
1479              onclick="setIframe('./samples/playground.html?sample=directions-travel-modes')"
1480            >
1481              Playground
1482            </button>
1483            <button
1484              class="button"
1485              onclick="setIframe('./samples/directions-travel-modes/iframe/index.html')"
1486            >
1487              Iframe
1488            </button>
1489            <button
1490              class="button"
1491              onclick="setIframe('./samples/directions-travel-modes/app/dist/index.html')"
1492            >
1493              App
1494            </button>
1495            <a
1496              class="button"
1497              href="https://github.com/googlemaps/js-samples/tree/main/samples/directions-travel-modes"
1498              >Code</a
1499            >
1500          </div>
1501        </div>
1502
1503        <div class="card">
1504          <h4 class="card-header">directions-waypoints</h4>
1505          <div class="card-footer">
1506            <button
1507              class="button"
1508              onclick="setIframe('./samples/playground.html?sample=directions-waypoints')"
1509            >
1510              Playground
1511            </button>
1512            <button
1513              class="button"
1514              onclick="setIframe('./samples/directions-waypoints/iframe/index.html')"
1515            >
1516              Iframe
1517            </button>
1518            <button
1519              class="button"
1520              onclick="setIframe('./samples/directions-waypoints/app/dist/index.html')"
1521            >
1522              App
1523            </button>
1524            <a
1525              class="button"
1526              href="https://github.com/googlemaps/js-samples/tree/main/samples/directions-waypoints"
1527              >Code</a
1528            >
1529          </div>
1530        </div>
1531
1532        <div class="card">
1533          <h4 class="card-header">disable-zoom-and-pan</h4>
1534          <div class="card-footer">
1535            <button
1535
1536              class="button"
1537              onclick="setIframe('./samples/playground.html?sample=disable-zoom-and-pan')"
1538            >
1539              Playground
1540            </button>
1541            <button
1542              class="button"
1543              onclick="setIframe('./samples/disable-zoom-and-pan/iframe/index.html')"
1544            >
1545              Iframe
1546            </button>
1547            <button
1548              class="button"
1549              onclick="setIframe('./samples/disable-zoom-and-pan/app/dist/index.html')"
1550            >
1551              App
1552            </button>
1553            <a
1554              class="button"
1555              href="https://github.com/googlemaps/js-samples/tree/main/samples/disable-zoom-and-pan"
1556              >Code</a
1557            >
1558          </div>
1559        </div>
1560
1561        <div class="card">
1562          <h4 class="card-header">distance-matrix</h4>
1563          <div class="card-footer">
1564            <button
1565              class="button"
1566              onclick="setIframe('./samples/playground.html?sample=distance-matrix')"
1567            >
1568              Playground
1569            </button>
1570            <button
1571              class="button"
1572              onclick="setIframe('./samples/distance-matrix/iframe/index.html')"
1573            >
1574              Iframe
1575            </button>
1576            <button
1577              class="button"
1578              onclick="setIframe('./samples/distance-matrix/app/dist/index.html')"
1579            >
1580              App
1581            </button>
1582            <a
1583              class="button"
1584              href="https://github.com/googlemaps/js-samples/tree/main/samples/distance-matrix"
1585              >Code</a
1586            >
1587          </div>
1588        </div>
1589
1590        <div class="card">
1591          <h4 class="card-header">drawing-tools</h4>
1592          <div class="card-footer">
1593            <button
1594              class="button"
1595              onclick="setIframe('./samples/playground.html?sample=drawing-tools')"
1596            >
1597              Playground
1598            </button>
1599            <button
1600              class="button"
1601              onclick="setIframe('./samples/drawing-tools/iframe/index.html')"
1602            >
1603              Iframe
1604            </button>
1605            <button
1606              class="button"
1607              onclick="setIframe('./samples/drawing-tools/app/dist/index.html')"
1608            >
1609              App
1610            </button>
1611            <a
1612              class="button"
1613              href="https://github.com/googlemaps/js-samples/tree/main/samples/drawing-tools"
1614              >Code</a
1615            >
1616          </div>
1617        </div>
1618
1619        <div class="card">
1620          <h4 class="card-header">earthquake-circles</h4>
1621          <div class="card-footer">
1622            <button
1623              class="button"
1624              onclick="setIframe('./samples/playground.html?sample=earthquake-circles')"
1625            >
1626              Playground
1627            </button>
1628            <button
1629              class="button"
1630              onclick="setIframe('./samples/earthquake-circles/iframe/index.html')"
1631            >
1632              Iframe
1633            </button>
1634            <button
1635              class="button"
1636              onclick="setIframe('./samples/earthquake-circles/app/dist/index.html')"
1637            >
1638              App
1639            </button>
1640            <a
1641              class="button"
1642              href="https://github.com/googlemaps/js-samples/tree/main/samples/earthquake-circles"
1643              >Code</a
1644            >
1645          </div>
1646        </div>
1647
1648        <div class="card">
1649          <h4 class="card-header">earthquake-heatmap</h4>
1650          <div class="card-footer">
1651            <button
1652              class="button"
1653              onclick="setIframe('./samples/playground.html?sample=earthquake-heatmap')"
1654            >
1655              Playground
1656            </button>
1657            <button
1658              class="button"
1659              onclick="setIframe('./samples/earthquake-heatmap/iframe/index.html')"
1660            >
1661              Iframe
1662            </button>
1663            <button
1664              class="button"
1665              onclick="setIframe('./samples/earthquake-heatmap/app/dist/index.html')"
1666            >
1667              App
1668            </button>
1669            <a
1670              class="button"
1671              href="https://github.com/googlemaps/js-samples/tree/main/samples/earthquake-heatmap"
1672              >Code</a
1673            >
1674          </div>
1675        </div>
1676
1677        <div class="card">
1678          <h4 class="card-header">earthquake-markers</h4>
1679          <div class="card-footer">
1680            <button
1681              class="button"
1682              onclick="setIframe('./samples/playground.html?sample=earthquake-markers')"
1683            >
1684              Playground
1685            </button>
1686            <button
1687              class="button"
1688              onclick="setIframe('./samples/earthquake-markers/iframe/index.html')"
1689            >
1690              Iframe
1691            </button>
1692            <button
1693              class="button"
1694              onclick="setIframe('./samples/earthquake-markers/app/dist/index.html')"
1695            >
1696              App
1697            </button>
1698            <a
1699              class="button"
1700              href="https://github.com/googlemaps/js-samples/tree/main/samples/earthquake-markers"
1701              >Code</a
1702            >
1703          </div>
1704        </div>
1705
1706        <div class="card">
1707          <h4 class="card-header">elevation-paths</h4>
1708          <div class="card-footer">
1709            <button
1710              class="button"
1711              onclick="setIframe('./samples/playground.html?sample=elevation-paths')"
1712            >
1713              Playground
1714            </button>
1715            <button
1716              class="button"
1717              onclick="setIframe('./samples/elevation-paths/iframe/index.html')"
1718            >
1719              Iframe
1720            </button>
1721            <button
1722              class="button"
1723              onclick="setIframe('./samples/elevation-paths/app/dist/index.html')"
1724            >
1725              App
1726            </button>
1727            <a
1728              class="button"
1729              href="https://github.com/googlemaps/js-samples/tree/main/samples/elevation-paths"
1730              >Code</a
1731            >
1732          </div>
1733        </div>
1734
1735        <div class="card">
1736          <h4 class="card-header">elevation-simple</h4>
1737          <div class="card-footer">
1738            <button
1739              class="button"
1740              onclick="setIframe('./samples/playground.html?sample=elevation-simple')"
1741            >
1742              Playground
1743            </button>
1744            <button
1745              class="button"
1746              onclick="setIframe('./samples/elevation-simple/iframe/index.html')"
1747            >
1748              Iframe
1749            </button>
1750            <button
1751              class="button"
1752              onclick="setIframe('./samples/elevation-simple/app/dist/index.html')"
1753            >
1754              App
1755            </button>
1756            <a
1757              class="button"
1758              href="https://github.com/googlemaps/js-samples/tree/main/samples/elevation-simple"
1759              >Code</a
1760            >
1761          </div>
1762        </div>
1763
1764        <div class="card">
1765          <h4 class="card-header">event-arguments</h4>
1766          <div class="card-footer">
1767            <button
1768              class="button"
1769              onclick="setIframe('./samples/playground.html?sample=event-arguments')"
1770            >
1771              Playground
1772            </button>
1773            <button
1774              class="button"
1775              onclick="setIframe('./samples/event-arguments/iframe/index.html')"
1776            >
1777              Iframe
1778            </button>
1779            <button
1780              class="button"
1781              onclick="setIframe('./samples/event-arguments/app/dist/index.html')"
1782            >
1783              App
1784            </button>
1785            <a
1786              class="button"
1787              href="https://github.com/googlemaps/js-samples/tree/main/samples/event-arguments"
1788              >Code</a
1789            >
1790          </div>
1791        </div>
1792
1793        <div class="card">
1794          <h4 class="card-header">event-click-latlng</h4>
1795          <div class="card-footer">
1796            <button
1797              class="button"
1798              onclick="setIframe('./samples/playground.html?sample=event-click-latlng')"
1799            >
1800              Playground
1801            </button>
1802            <button
1803              class="button"
1804              onclick="setIframe('./samples/event-click-latlng/iframe/index.html')"
1805            >
1806              Iframe
1807            </button>
1808            <button
1809              class="button"
1810              onclick="setIframe('./samples/event-click-latlng/app/dist/index.html')"
1811            >
1812              App
1813            </button>
1814            <a
1815              class="button"
1816              href="https://github.com/googlemaps/js-samples/tree/main/samples/event-click-latlng"
1817              >Code</a
1818            >
1819          </div>
1820        </div>
1821
1822        <div class="card">
1823          <h4 class="card-header">event-closure</h4>
1824          <div class="card-footer">
1825            <button
1826              class="button"
1827              onclick="setIframe('./samples/playground.html?sample=event-closure')"
1828            >
1829              Playground
1830            </button>
1831            <button
1832              class="button"
1833              onclick="setIframe('./samples/event-closure/iframe/index.html')"
1834            >
1835              Iframe
1836            </button>
1837            <button
1838              class="button"
1839              onclick="setIframe('./samples/event-closure/app/dist/index.html')"
1840            >
1841              App
1842            </button>
1843            <a
1844              class="button"
1845              href="https://github.com/googlemaps/js-samples/tree/main/samples/event-closure"
1846              >Code</a
1847            >
1848          </div>
1849        </div>
1850
1851        <div class="card">
1852          <h4 class="card-header">event-domListener</h4>
1853          <div class="card-footer">
1854            <button
1855              class="button"
1856              onclick="setIframe('./samples/playground.html?sample=event-domListener')"
1857            >
1858              Playground
1859            </button>
1860            <button
1861              class="button"
1862              onclick="setIframe('./samples/event-domListener/iframe/index.html')"
1863            >
1864              Iframe
1865            </button>
1866            <button
1867              class="button"
1868              onclick="setIframe('./samples/event-domListener/app/dist/index.html')"
1869            >
1870              App
1871            </button>
1872            <a
1873              class="button"
1874              href="https://github.com/googlemaps/js-samples/tree/main/samples/event-domListener"
1875              >Code</a
1876            >
1877          </div>
1878        </div>
1879
1880        <div class="card">
1881          <h4 class="card-header">event-poi</h4>
1882          <div class="card-footer">
1883            <button
1884              class="button"
1885              onclick="setIframe('./samples/playground.html?sample=event-poi')"
1886            >
1887              Playground
1888            </button>
1889            <button
1890              class="button"
1891              onclick="setIframe('./samples/event-poi/iframe/index.html')"
1892            >
1893              Iframe
1894            </button>
1895            <button
1896              class="button"
1897              onclick="setIframe('./samples/event-poi/app/dist/index.html')"
1898            >
1899              App
1900            </button>
1901            <a
1902              class="button"
1903              href="https://github.com/googlemaps/js-samples/tree/main/samples/event-poi"
1904              >Code</a
1905            >
1906          </div>
1907        </div>
1908
1909        <div class="card">
1910          <h4 class="card-header">event-properties</h4>
1911          <div class="card-footer">
1912            <button
1913              class="button"
1914              onclick="setIframe('./samples/playground.html?sample=event-properties')"
1915            >
1916              Playground
1917            </button>
1918            <button
1919              class="button"
1920              onclick="setIframe('./samples/event-properties/iframe/index.html')"
1921            >
1922              Iframe
1923            </button>
1924            <button
1925              class="button"
1926              onclick="setIframe('./samples/event-properties/app/dist/index.html')"
1927            >
1928              App
1929            </button>
1930            <a
1931              class="button"
1932              href="https://github.com/googlemaps/js-samples/tree/main/samples/event-properties"
1933              >Code</a
1934            >
1935          </div>
1936        </div>
1937
1938        <div class="card">
1939          <h4 class="card-header">event-simple</h4>
1940          <div class="card-footer">
1941            <button
1942              class="button"
1943              onclick="setIframe('./samples/playground.html?sample=event-simple')"
1944            >
1945              Playground
1946            </button>
1947            <button
1948              class="button"
1949              onclick="setIframe('./samples/event-simple/iframe/index.html')"
1950            >
1951              Iframe
1952            </button>
1953            <button
1954              class="button"
1955              onclick="setIframe('./samples/event-simple/app/dist/index.html')"
1956            >
1957              App
1958            </button>
1959            <a
1960              class="button"
1961              href="https://github.com/googlemaps/js-samples/tree/main/samples/event-simple"
1962              >Code</a
1963            >
1964          </div>
1965        </div>
1966
1967        <div class="card">
1968          <h4 class="card-header">
1968geocoding-component-restriction</h4>
1969          <div class="card-footer">
1970            <button
1971              class="button"
1972              onclick="setIframe('./samples/playground.html?sample=geocoding-component-restriction')"
1973            >
1974              Playground
1975            </button>
1976            <button
1977              class="button"
1978              onclick="setIframe('./samples/geocoding-component-restriction/iframe/index.html')"
1979            >
1980              Iframe
1981            </button>
1982            <button
1983              class="button"
1984              onclick="setIframe('./samples/geocoding-component-restriction/app/dist/index.html')"
1985            >
1986              App
1987            </button>
1988            <a
1989              class="button"
1990              href="https://github.com/googlemaps/js-samples/tree/main/samples/geocoding-component-restriction"
1991              >Code</a
1992            >
1993          </div>
1994        </div>
1995
1996        <div class="card">
1997          <h4 class="card-header">geocoding-place-id</h4>
1998          <div class="card-footer">
1999            <button
2000              class="button"
2001              onclick="setIframe('./samples/playground.html?sample=geocoding-place-id')"
2002            >
2003              Playground
2004            </button>
2005            <button
2006              class="button"
2007              onclick="setIframe('./samples/geocoding-place-id/iframe/index.html')"
2008            >
2009              Iframe
2010            </button>
2011            <button
2012              class="button"
2013              onclick="setIframe('./samples/geocoding-place-id/app/dist/index.html')"
2014            >
2015              App
2016            </button>
2017            <a
2018              class="button"
2019              href="https://github.com/googlemaps/js-samples/tree/main/samples/geocoding-place-id"
2020              >Code</a
2021            >
2022          </div>
2023        </div>
2024
2025        <div class="card">
2026          <h4 class="card-header">geocoding-region-es</h4>
2027          <div class="card-footer">
2028            <button
2029              class="button"
2030              onclick="setIframe('./samples/playground.html?sample=geocoding-region-es')"
2031            >
2032              Playground
2033            </button>
2034            <button
2035              class="button"
2036              onclick="setIframe('./samples/geocoding-region-es/iframe/index.html')"
2037            >
2038              Iframe
2039            </button>
2040            <button
2041              class="button"
2042              onclick="setIframe('./samples/geocoding-region-es/app/dist/index.html')"
2043            >
2044              App
2045            </button>
2046            <a
2047              class="button"
2048              href="https://github.com/googlemaps/js-samples/tree/main/samples/geocoding-region-es"
2049              >Code</a
2050            >
2051          </div>
2052        </div>
2053
2054        <div class="card">
2055          <h4 class="card-header">geocoding-region-us</h4>
2056          <div class="card-footer">
2057            <button
2058              class="button"
2059              onclick="setIframe('./samples/playground.html?sample=geocoding-region-us')"
2060            >
2061              Playground
2062            </button>
2063            <button
2064              class="button"
2065              onclick="setIframe('./samples/geocoding-region-us/iframe/index.html')"
2066            >
2067              Iframe
2068            </button>
2069            <button
2070              class="button"
2071              onclick="setIframe('./samples/geocoding-region-us/app/dist/index.html')"
2072            >
2073              App
2074            </button>
2075            <a
2076              class="button"
2077              href="https://github.com/googlemaps/js-samples/tree/main/samples/geocoding-region-us"
2078              >Code</a
2079            >
2080          </div>
2081        </div>
2082
2083        <div class="card">
2084          <h4 class="card-header">geocoding-reverse</h4>
2085          <div class="card-footer">
2086            <button
2087              class="button"
2088              onclick="setIframe('./samples/playground.html?sample=geocoding-reverse')"
2089            >
2090              Playground
2091            </button>
2092            <button
2093              class="button"
2094              onclick="setIframe('./samples/geocoding-reverse/iframe/index.html')"
2095            >
2096              Iframe
2097            </button>
2098            <button
2099              class="button"
2100              onclick="setIframe('./samples/geocoding-reverse/app/dist/index.html')"
2101            >
2102              App
2103            </button>
2104            <a
2105              class="button"
2106              href="https://github.com/googlemaps/js-samples/tree/main/samples/geocoding-reverse"
2107              >Code</a
2108            >
2109          </div>
2110        </div>
2111
2112        <div class="card">
2113          <h4 class="card-header">geocoding-simple</h4>
2114          <div class="card-footer">
2115            <button
2116              class="button"
2117              onclick="setIframe('./samples/playground.html?sample=geocoding-simple')"
2118            >
2119              Playground
2120            </button>
2121            <button
2122              class="button"
2123              onclick="setIframe('./samples/geocoding-simple/iframe/index.html')"
2124            >
2125              Iframe
2126            </button>
2127            <button
2128              class="button"
2129              onclick="setIframe('./samples/geocoding-simple/app/dist/index.html')"
2130            >
2131              App
2132            </button>
2133            <a
2134              class="button"
2135              href="https://github.com/googlemaps/js-samples/tree/main/samples/geocoding-simple"
2136              >Code</a
2137            >
2138          </div>
2139        </div>
2140
2141        <div class="card">
2142          <h4 class="card-header">geometry-encodings</h4>
2143          <div class="card-footer">
2144            <button
2145              class="button"
2146              onclick="setIframe('./samples/playground.html?sample=geometry-encodings')"
2147            >
2148              Playground
2149            </button>
2150            <button
2151              class="button"
2152              onclick="setIframe('./samples/geometry-encodings/iframe/index.html')"
2153            >
2154              Iframe
2155            </button>
2156            <button
2157              class="button"
2158              onclick="setIframe('./samples/geometry-encodings/app/dist/index.html')"
2159            >
2160              App
2161            </button>
2162            <a
2163              class="button"
2164              href="https://github.com/googlemaps/js-samples/tree/main/samples/geometry-encodings"
2165              >Code</a
2166            >
2167          </div>
2168        </div>
2169
2170        <div class="card">
2171          <h4 class="card-header">geometry-headings</h4>
2172          <div class="card-footer">
2173            <button
2174              class="button"
2175              onclick="setIframe('./samples/playground.html?sample=geometry-headings')"
2176            >
2177              Playground
2178            </button>
2179            <button
2180              class="button"
2181              onclick="setIframe('./samples/geometry-headings/iframe/index.html')"
2182            >
2183              Iframe
2184            </button>
2185            <button
2186              class="button"
2187              onclick="setIframe('./samples/geometry-headings/app/dist/index.html')"
2188            >
2189              App
2190            </button>
2191            <a
2192              class="button"
2193              href="https://github.com/googlemaps/js-samples/tree/main/samples/geometry-headings"
2194              >Code</a
2195            >
2196          </div>
2197        </div>
2198
2199        <div class="card">
2200          <h4 class="card-header">
2200groundoverlay-simple</h4>
2201          <div class="card-footer">
2202            <button
2203              class="button"
2204              onclick="setIframe('./samples/playground.html?sample=groundoverlay-simple')"
2205            >
2206              Playground
2207            </button>
2208            <button
2209              class="button"
2210              onclick="setIframe('./samples/groundoverlay-simple/iframe/index.html')"
2211            >
2212              Iframe
2213            </button>
2214            <button
2215              class="button"
2216              onclick="setIframe('./samples/groundoverlay-simple/app/dist/index.html')"
2217            >
2218              App
2219            </button>
2220            <a
2221              class="button"
2222              href="https://github.com/googlemaps/js-samples/tree/main/samples/groundoverlay-simple"
2223              >Code</a
2224            >
2225          </div>
2226        </div>
2227
2228        <div class="card">
2229          <h4 class="card-header">hiding-features</h4>
2230          <div class="card-footer">
2231            <button
2232              class="button"
2233              onclick="setIframe('./samples/playground.html?sample=hiding-features')"
2234            >
2235              Playground
2236            </button>
2237            <button
2238              class="button"
2239              onclick="setIframe('./samples/hiding-features/iframe/index.html')"
2240            >
2241              Iframe
2242            </button>
2243            <button
2244              class="button"
2245              onclick="setIframe('./samples/hiding-features/app/dist/index.html')"
2246            >
2247              App
2248            </button>
2249            <a
2250              class="button"
2251              href="https://github.com/googlemaps/js-samples/tree/main/samples/hiding-features"
2252              >Code</a
2253            >
2254          </div>
2255        </div>
2256
2257        <div class="card">
2258          <h4 class="card-header">icon-complex</h4>
2259          <div class="card-footer">
2260            <button
2261              class="button"
2262              onclick="setIframe('./samples/playground.html?sample=icon-complex')"
2263            >
2264              Playground
2265            </button>
2266            <button
2267              class="button"
2268              onclick="setIframe('./samples/icon-complex/iframe/index.html')"
2269            >
2270              Iframe
2271            </button>
2272            <button
2273              class="button"
2274              onclick="setIframe('./samples/icon-complex/app/dist/index.html')"
2275            >
2276              App
2277            </button>
2278            <a
2279              class="button"
2280              href="https://github.com/googlemaps/js-samples/tree/main/samples/icon-complex"
2281              >Code</a
2282            >
2283          </div>
2284        </div>
2285
2286        <div class="card">
2287          <h4 class="card-header">icon-simple</h4>
2288          <div class="card-footer">
2289            <button
2290              class="button"
2291              onclick="setIframe('./samples/playground.html?sample=icon-simple')"
2292            >
2293              Playground
2294            </button>
2295            <button
2296              class="button"
2297              onclick="setIframe('./samples/icon-simple/iframe/index.html')"
2298            >
2299              Iframe
2300            </button>
2301            <button
2302              class="button"
2303              onclick="setIframe('./samples/icon-simple/app/dist/index.html')"
2304            >
2305              App
2306            </button>
2307            <a
2308              class="button"
2309              href="https://github.com/googlemaps/js-samples/tree/main/samples/icon-simple"
2310              >Code</a
2311            >
2312          </div>
2313        </div>
2314
2315        <div class="card">
2316          <h4 class="card-header">infowindow-simple</h4>
2317          <div class="card-footer">
2318            <button
2319              class="button"
2320              onclick="setIframe('./samples/playground.html?sample=infowindow-simple')"
2321            >
2322              Playground
2323            </button>
2324            <button
2325              class="button"
2326              onclick="setIframe('./samples/infowindow-simple/iframe/index.html')"
2327            >
2328              Iframe
2329            </button>
2330            <button
2331              class="button"
2332              onclick="setIframe('./samples/infowindow-simple/app/dist/index.html')"
2333            >
2334              App
2335            </button>
2336            <a
2337              class="button"
2338              href="https://github.com/googlemaps/js-samples/tree/main/samples/infowindow-simple"
2339              >Code</a
2340            >
2341          </div>
2342        </div>
2343
2344        <div class="card">
2345          <h4 class="card-header">infowindow-simple-max</h4>
2346          <div class="card-footer">
2347            <button
2348              class="button"
2349              onclick="setIframe('./samples/playground.html?sample=infowindow-simple-max')"
2350            >
2351              Playground
2352            </button>
2353            <button
2354              class="button"
2355              onclick="setIframe('./samples/infowindow-simple-max/iframe/index.html')"
2356            >
2357              Iframe
2358            </button>
2359            <button
2360              class="button"
2361              onclick="setIframe('./samples/infowindow-simple-max/app/dist/index.html')"
2362            >
2363              App
2364            </button>
2365            <a
2366              class="button"
2367              href="https://github.com/googlemaps/js-samples/tree/main/samples/infowindow-simple-max"
2368              >Code</a
2369            >
2370          </div>
2371        </div>
2372
2373        <div class="card">
2374          <h4 class="card-header">inset-map</h4>
2375          <div class="card-footer">
2376            <button
2377              class="button"
2378              onclick="setIframe('./samples/playground.html?sample=inset-map')"
2379            >
2380              Playground
2381            </button>
2382            <button
2383              class="button"
2384              onclick="setIframe('./samples/inset-map/iframe/index.html')"
2385            >
2386              Iframe
2387            </button>
2388            <button
2389              class="button"
2390              onclick="setIframe('./samples/inset-map/app/dist/index.html')"
2391            >
2392              App
2393            </button>
2394            <a
2395              class="button"
2396              href="https://github.com/googlemaps/js-samples/tree/main/samples/inset-map"
2397              >Code</a
2398            >
2399          </div>
2400        </div>
2401
2402        <div class="card">
2403          <h4 class="card-header">interaction-cooperative</h4>
2404          <div class="card-footer">
2405            <button
2406              class="button"
2407              onclick="setIframe('./samples/playground.html?sample=interaction-cooperative')"
2408            >
2409              Playground
2410            </button>
2411            <button
2412              class="button"
2413              onclick="setIframe('./samples/interaction-cooperative/iframe/index.html')"
2414            >
2415              Iframe
2416            </button>
2417            <button
2418              class="button"
2419              onclick="setIframe('./samples/interaction-cooperative/app/dist/index.html')"
2420            >
2421              App
2422            </button>
2423            <a
2424              class="button"
2425              href="https://github.com/googlemaps/js-samples/tree/main/samples/interaction-cooperative"
2426              >Code</a
2427            >
2428          </div>
2429        </div>
2430
2431        <div class="card">
2432          <h4 class="card-header">interaction-default</h4>
2433          <div class="card-footer">
2434            <button
2435              class="button"
2436              onclick="setIframe('./samples/playground.html?sample=interaction-default')"
2437            >
2438              Playground
2439            </button>
2440            <button
2441              class="button"
2442              onclick="setIframe('./samples/interaction-default/iframe/index.html')"
2443            >
2444              Iframe
2445            </button>
2446            <button
2447              class="button"
2448              onclick="setIframe('./samples/interaction-default/app/dist/index.html')"
2449            >
2450              App
2451            </button>
2452            <a
2453              class="button"
2454              href="https://github.com/googlemaps/js-samples/tree/main/samples/interaction-default"
2455              >Code</a
2456            >
2457          </div>
2458        </div>
2459
2460        <div class="card">
2461          <h4 class="card-header">interaction-disable-pan-zoom</h4>
2462          <div class="card-footer">
2463            <button
2464              class="button"
2465              onclick="setIframe('./samples/playground.html?sample=interaction-disable-pan-zoom')"
2466            >
2467              Playground
2468            </button>
2469            <button
2470              class="button"
2471              onclick="setIframe('./samples/interaction-disable-pan-zoom/iframe/index.html')"
2472            >
2473              Iframe
2474            </button>
2475            <button
2476              class="button"
2477              onclick="setIframe('./samples/interaction-disable-pan-zoom/app/dist/index.html')"
2478            >
2479              App
2480            </button>
2481            <a
2482              class="button"
2483              href="https://github.com/googlemaps/js-samples/tree/main/samples/interaction-disable-pan-zoom"
2484              >Code</a
2485            >
2486          </div>
2487        </div>
2488
2489        <div class="card">
2490          <h4 class="card-header">interaction-greedy</h4>
2491          <div class="card-footer">
2492            <button
2493              class="button"
2494              onclick="setIframe('./samples/playground.html?sample=interaction-greedy')"
2495            >
2496              Playground
2497            </button>
2498            <button
2499              class="button"
2500              onclick="setIframe('./samples/interaction-greedy/iframe/index.html')"
2501            >
2502              Iframe
2503            </button>
2504            <button
2505              class="button"
2506              onclick="setIframe('./samples/interaction-greedy/app/dist/index.html')"
2507            >
2508              App
2509            </button>
2510            <a
2511              class="button"
2512              href="https://github.com/googlemaps/js-samples/tree/main/samples/interaction-greedy"
2513              >Code</a
2514            >
2515          </div>
2516        </div>
2517
2518        <div class="card">
2519          <h4 class="card-header">interaction-none</h4>
2520          <div class="card-footer">
2521            <button
2522              class="button"
2523              onclick="setIframe('./samples/playground.html?sample=interaction-none')"
2524            >
2525              Playground
2526            </button>
2527            <button
2528              class="button"
2529              onclick="setIframe('./samples/interaction-none/iframe/index.html')"
2530            >
2531              Iframe
2532            </button>
2533            <button
2534              class="button"
2535              onclick="setIframe('./samples/interaction-none/app/dist/index.html')"
2536            >
2537              App
2538            </button>
2539            <a
2540              class="button"
2541              href="https://github.com/googlemaps/js-samples/tree/main/samples/interaction-none"
2542              >Code</a
2543            >
2544          </div>
2545        </div>
2546
2547        <div class="card">
2548          <h4 class="card-header">interaction-restricted</h4>
2549          <div class="card-footer">
2550            <button
2551              class="button"
2552              onclick="setIframe('./samples/playground.html?sample=interaction-restricted')"
2553            >
2554              Playground
2555            </button>
2556            <button
2557              class="button"
2558              onclick="setIframe('./samples/interaction-restricted/iframe/index.html')"
2559            >
2560              Iframe
2561            </button>
2562            <button
2563              class="button"
2564              onclick="setIframe('./samples/interaction-restricted/app/dist/index.html')"
2565            >
2566              App
2567            </button>
2568            <a
2569              class="button"
2570              href="https://github.com/googlemaps/js-samples/tree/main/samples/interaction-restricted"
2571              >Code</a
2572            >
2573          </div>
2574        </div>
2575
2576        <div class="card">
2577          <h4 class="card-header">kml-map</h4>
2578          <div class="card-footer">
2579            <button
2580              class="button"
2581              onclick="setIframe('./samples/playground.html?sample=kml-map')"
2582            >
2583              Playground
2584            </button>
2585            <button
2586              class="button"
2587              onclick="setIframe('./samples/kml-map/iframe/index.html')"
2588            >
2589              Iframe
2590            </button>
2591            <button
2592              class="button"
2593              onclick="setIframe('./samples/kml-map/app/dist/index.html')"
2594            >
2595              App
2596            </button>
2597            <a
2598              class="button"
2599              href="https://github.com/googlemaps/js-samples/tree/main/samples/kml-map"
2600              >Code</a
2601            >
2602          </div>
2603        </div>
2604
2605        <div class="card">
2606          <h4 class="card-header">layer-bicycling</h4>
2607          <div class="card-footer">
2608            <button
2609              class="button"
2610              onclick="setIframe('./samples/playground.html?sample=layer-bicycling')"
2611            >
2612              Playground
2613            </button>
2614            <button
2615              class="button"
2616              onclick="setIframe('./samples/layer-bicycling/iframe/index.html')"
2617            >
2618              Iframe
2619            </button>
2620            <button
2621              class="button"
2622              onclick="setIframe('./samples/layer-bicycling/app/dist/index.html')"
2623            >
2624              App
2625            </button>
2626            <a
2627              class="button"
2628              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-bicycling"
2629              >Code</a
2630            >
2631          </div>
2632        </div>
2633
2634        <div class="card">
2635          <h4 class="card-header">layer-data-dragndrop</h4>
2636          <div class="card-footer">
2637            <button
2638              class="button"
2639              onclick="setIframe('./samples/playground.html?sample=layer-data-dragndrop')"
2640            >
2641              Playground
2642            </button>
2643            <button
2644              class="button"
2645              onclick="setIframe('./samples/layer-data-dragndrop/iframe/index.html')"
2646            >
2647              Iframe
2648            </button>
2649            <button
2650              class="button"
2651              onclick="setIframe('./samples/layer-data-dragndrop/app/dist/index.html')"
2652            >
2653              App
2654            </button>
2655            <a
2656              class="button"
2657              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-dragndrop"
2658              >Code</a
2659            >
2660          </div>
2661        </div>
2662
2663        <div class="card">
2664          <h4 class="card-header">layer-data-dynamic</h4>
2665          <div class="card-footer">
2666            <button
2667              class="button"
2668              onclick="setIframe('./samples/playground.html?sample=layer-data-dynamic')"
2669            >
2670              Playground
2671            </button>
2672            <button
2673              class="button"
2674              onclick="setIframe('./samples/layer-data-dynamic/iframe/index.html')"
2675            >
2676              Iframe
2677            </button>
2678            <button
2679              class="button"
2680              onclick="setIframe('./samples/layer-data-dynamic/app/dist/index.html')"
2681            >
2682              App
2683            </button>
2684            <a
2685              class="button"
2686              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-dynamic"
2687              >Code</a
2688            >
2689          </div>
2690        </div>
2691
2692        <div class="card">
2693          <h4 class="card-header">layer-data-event</h4>
2694          <div class="card-footer">
2695            <button
2696              class="button"
2697              onclick="setIframe('./samples/playground.html?sample=layer-data-event')"
2698            >
2699              Playground
2700            </button>
2701            <button
2702              class="button"
2703              onclick="setIframe('./samples/layer-data-event/iframe/index.html')"
2704            >
2705              Iframe
2706            </button>
2707            <button
2708              class="button"
2709              onclick="setIframe('./samples/layer-data-event/app/dist/index.html')"
2710            >
2711              App
2712            </button>
2713            <a
2714              class="button"
2715              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-event"
2716              >Code</a
2717            >
2718          </div>
2719        </div>
2720
2721        <div class="card">
2722          <h4 class="card-header">layer-data-polygon</h4>
2723          <div class="card-fo
2723oter">
2724            <button
2725              class="button"
2726              onclick="setIframe('./samples/playground.html?sample=layer-data-polygon')"
2727            >
2728              Playground
2729            </button>
2730            <button
2731              class="button"
2732              onclick="setIframe('./samples/layer-data-polygon/iframe/index.html')"
2733            >
2734              Iframe
2735            </button>
2736            <button
2737              class="button"
2738              onclick="setIframe('./samples/layer-data-polygon/app/dist/index.html')"
2739            >
2740              App
2741            </button>
2742            <a
2743              class="button"
2744              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-polygon"
2745              >Code</a
2746            >
2747          </div>
2748        </div>
2749
2750        <div class="card">
2751          <h4 class="card-header">layer-data-quakes</h4>
2752          <div class="card-footer">
2753            <button
2754              class="button"
2755              onclick="setIframe('./samples/playground.html?sample=layer-data-quakes')"
2756            >
2757              Playground
2758            </button>
2759            <button
2760              class="button"
2761              onclick="setIframe('./samples/layer-data-quakes/iframe/index.html')"
2762            >
2763              Iframe
2764            </button>
2765            <button
2766              class="button"
2767              onclick="setIframe('./samples/layer-data-quakes/app/dist/index.html')"
2768            >
2769              App
2770            </button>
2771            <a
2772              class="button"
2773              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-quakes"
2774              >Code</a
2775            >
2776          </div>
2777        </div>
2778
2779        <div class="card">
2780          <h4 class="card-header">layer-data-quakes-red</h4>
2781          <div class="card-footer">
2782            <button
2783              class="button"
2784              onclick="setIframe('./samples/playground.html?sample=layer-data-quakes-red')"
2785            >
2786              Playground
2787            </button>
2788            <button
2789              class="button"
2790              onclick="setIframe('./samples/layer-data-quakes-red/iframe/index.html')"
2791            >
2792              Iframe
2793            </button>
2794            <button
2795              class="button"
2796              onclick="setIframe('./samples/layer-data-quakes-red/app/dist/index.html')"
2797            >
2798              App
2799            </button>
2800            <a
2801              class="button"
2802              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-quakes-red"
2803              >Code</a
2804            >
2805          </div>
2806        </div>
2807
2808        <div class="card">
2809          <h4 class="card-header">layer-data-quakes-simple</h4>
2810          <div class="card-footer">
2811            <button
2812              class="button"
2813              onclick="setIframe('./samples/playground.html?sample=layer-data-quakes-simple')"
2814            >
2815              Playground
2816            </button>
2817            <button
2818              class="button"
2819              onclick="setIframe('./samples/layer-data-quakes-simple/iframe/index.html')"
2820            >
2821              Iframe
2822            </button>
2823            <button
2824              class="button"
2825              onclick="setIframe('./samples/layer-data-quakes-simple/app/dist/index.html')"
2826            >
2827              App
2828            </button>
2829            <a
2830              class="button"
2831              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-quakes-simple"
2832              >Code</a
2833            >
2834          </div>
2835        </div>
2836
2837        <div class="card">
2838          <h4 class="card-header">layer-data-simple</h4>
2839          <div class="card-footer">
2840            <button
2841              class="button"
2842              onclick="setIframe('./samples/playground.html?sample=layer-data-simple')"
2843            >
2844              Playground
2845            </button>
2846            <button
2847              class="button"
2848              onclick="setIframe('./samples/layer-data-simple/iframe/index.html')"
2849            >
2850              Iframe
2851            </button>
2852            <button
2853              class="button"
2854              onclick="setIframe('./samples/layer-data-simple/app/dist/index.html')"
2855            >
2856              App
2857            </button>
2858            <a
2859              class="button"
2860              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-simple"
2861              >Code</a
2862            >
2863          </div>
2864        </div>
2865
2866        <div class="card">
2867          <h4 class="card-header">layer-data-style</h4>
2868          <div class="card-footer">
2869            <button
2870              class="button"
2871              onclick="setIframe('./samples/playground.html?sample=layer-data-style')"
2872            >
2873              Playground
2874            </button>
2875            <button
2876              class="button"
2877              onclick="setIframe('./samples/layer-data-style/iframe/index.html')"
2878            >
2879              Iframe
2880            </button>
2881            <button
2882              class="button"
2883              onclick="setIframe('./samples/layer-data-style/app/dist/index.html')"
2884            >
2885              App
2886            </button>
2887            <a
2888              class="button"
2889              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-data-style"
2890              >Code</a
2891            >
2892          </div>
2893        </div>
2894
2895        <div class="card">
2896          <h4 class="card-header">layer-georss</h4>
2897          <div class="card-footer">
2898            <button
2899              class="button"
2900              onclick="setIframe('./samples/playground.html?sample=layer-georss')"
2901            >
2902              Playground
2903            </button>
2904            <button
2905              class="button"
2906              onclick="setIframe('./samples/layer-georss/iframe/index.html')"
2907            >
2908              Iframe
2909            </button>
2910            <button
2911              class="button"
2912              onclick="setIframe('./samples/layer-georss/app/dist/index.html')"
2913            >
2914              App
2915            </button>
2916            <a
2917              class="button"
2918              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-georss"
2919              >Code</a
2920            >
2921          </div>
2922        </div>
2923
2924        <div class="card">
2925          <h4 class="card-header">layer-heatmap</h4>
2926          <div class="card-footer">
2927            <button
2928              class="button"
2929              onclick="setIframe('./samples/playground.html?sample=layer-heatmap')"
2930            >
2931              Playground
2932            </button>
2933            <button
2934              class="button"
2935              onclick="setIframe('./samples/layer-heatmap/iframe/index.html')"
2936            >
2937              Iframe
2938            </button>
2939            <button
2940              class="button"
2941              onclick="setIframe('./samples/layer-heatmap/app/dist/index.html')"
2942            >
2943              App
2944            </button>
2945            <a
2946              class="button"
2947              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-heatmap"
2948              >Code</a
2949            >
2950          </div>
2951        </div>
2952
2953        <div class="card">
2954          <h4 class="card-header">layer-kml</h4>
2955          <div class="card-footer">
2956            <button
2957              class="button"
2958              onclick="setIframe('./samples/playground.html?sample=layer-kml')"
2959            >
2960              Playground
2961            </button>
2962            <button
2963              class="button"
2964              onclick="setIframe('./samples/layer-kml/iframe/index.html')"
2965            >
2966              Iframe
2967            </button>
2968            <button
2969              class="button"
2970              onclick="setIframe('./samples/layer-kml/app/dist/index.html')"
2971            >
2972              App
2973            </button>
2974            <a
2975              class="button"
2976              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-kml"
2977              >Code</a
2978            >
2979          </div>
2980        </div>
2981
2982        <div class="card">
2983          <h4 class="card-header">layer-kml-features</h4>
2984          <div class="card-footer">
2985            <button
2986              class="button"
2987              onclick="setIframe('./samples/playground.html?sample=layer-kml-features')"
2988            >
2989              Playground
2990            </button>
2991            <button
2992              class="button"
2993              onclick="setIframe('./samples/layer-kml-features/iframe/index.html')"
2994            >
2995              Iframe
2996            </button>
2997            <button
2998              class="button"
2999              onclick="setIframe('./samples/layer-kml-features/app/dist/index.html')"
3000            >
3001              App
3002            </button>
3003            <a
3004              class="button"
3005              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-kml-features"
3006              >Code</a
3007            >
3008          </div>
3009        </div>
3010
3011        <div class="card">
3012          <h4 class="card-header">layer-traffic</h4>
3013          <div class="card-footer">
3014            <button
3015              class="button"
3016              onclick="setIframe('./samples/playground.html?sample=layer-traffic')"
3017            >
3018              Playground
3019            </button>
3020            <button
3021              class="button"
3022              onclick="setIframe('./samples/layer-traffic/iframe/index.html')"
3023            >
3024              Iframe
3025            </button>
3026            <button
3027              class="button"
3028              onclick="setIframe('./samples/layer-traffic/app/dist/index.html')"
3029            >
3030              App
3031            </button>
3032            <a
3033              class="button"
3034              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-traffic"
3035              >Code</a
3036            >
3037          </div>
3038        </div>
3039
3040        <div class="card">
3041          <h4 class="card-header">layer-transit</h4>
3042          <div class="card-footer">
3043            <button
3044              class="button"
3045              onclick="setIframe('./samples/playground.html?sample=layer-transit')"
3046            >
3047              Playground
3048            </button>
3049            <button
3050              class="button"
3051              onclick="setIframe('./samples/layer-transit/iframe/index.html')"
3052            >
3053              Iframe
3054            </button>
3055            <button
3056              class="button"
3057              onclick="setIframe('./samples/layer-transit/app/dist/index.html')"
3058            >
3059              App
3060            </button>
3061            <a
3062              class="button"
3063              href="https://github.com/googlemaps/js-samples/tree/main/samples/layer-transit"
3064              >Code</a
3065            >
3066          </div>
3067        </div>
3068
3069        <div class="card">
3070          <h4 class="card-header">legend</h4>
3071          <div class="card-footer">
3072            <button
3073              class="button"
3074              onclick="setIframe('./samples/playground.html?sample=legend')"
3075            >
3076              Playground
3077            </button>
3078            <button
3079              class="button"
3080              onclick="setIframe('./samples/legend/iframe/index.html')"
3081            >
3082              Iframe
3083            </button>
3084            <button
3085              class="button"
3086              onclick="setIframe('./samples/legend/app/dist/index.html')"
3087            >
3088              App
3089            </button>
3090            <a
3091              class="button"
3092              href="https://github.com/googlemaps/js-samples/tree/main/samples/legend"
3093              >Code</a
3094            >
3095          </div>
3096        </div>
3097
3098        <div class="card">
3099          <h4 class="card-header">js-local-context-basic</h4>
3100          <div class="card-footer">
3101            <button
3102              class="button"
3103              onclick="setIframe('./samples/playground.html?sample=js-local-context-basic')"
3104            >
3105              Playground
3106            </button>
3107            <button
3108              class="button"
3109              onclick="setIframe('./samples/js-local-context-basic/iframe/index.html')"
3110            >
3111              Iframe
3112            </button>
3113            <button
3114              class="button"
3115              onclick="setIframe('./samples/js-local-context-basic/app/dist/index.html')"
3116            >
3117              App
3118            </button>
3119            <a
3120              class="button"
3121              href="https://github.com/googlemaps/js-samples/tree/main/samples/js-local-context-basic"
3122              >Code</a
3123            >
3124          </div>
3125        </div>
3126
3127        <div class="card">
3128          <h4 class="card-header">js-local-context-events</h4>
3129          <div class="card-footer">
3130            <button
3131              class="button"
3132              onclick="setIframe('./samples/playground.html?sample=js-local-context-events')"
3133            >
3134              Playground
3135            </button>
3136            <button
3137              class="button"
3138              onclick="setIframe('./samples/js-local-context-events/iframe/index.html')"
3139            >
3140              Iframe
3141            </button>
3142            <button
3143              class="button"
3144              onclick="setIframe('./samples/js-local-context-events/app/dist/index.html')"
3145            >
3146              App
3147            </button>
3148            <a
3149              class="button"
3150              href="https://github.com/googlemaps/js-samples/tree/main/samples/js-local-context-events"
3151              >Code</a
3152            >
3153          </div>
3154        </div>
3155
3156        <div class="card">
3157          <h4 class="card-header">js-local-context-home</h4>
3158          <div class="card-footer">
3159            <button
3160              class="button"
3161              onclick="setIframe('./samples/playground.html?sample=js-local-context-home')"
3162            >
3163              Playground
3164            </button>
3165            <button
3166              class="button"
3167              onclick="setIframe('./samples/js-local-context-home/iframe/index.html')"
3168            >
3169              Iframe
3170            </button>
3171            <button
3172              class="button"
3173              onclick="setIframe('./samples/js-local-context-home/app/dist/index.html')"
3174            >
3175              App
3176            </button>
3177            <a
3178              class="button"
3179              href="https://github.com/googlemaps/js-samples/tree/main/samples/js-local-context-home"
3180              >Code</a
3181            >
3182          </div>
3183        </div>
3184
3185        <div class="card">
3186          <h4 class="card-header">js-local-context-restrictions</h4>
3187          <div class="card-footer">
3188            <button
3189              class="button"
3190              onclick="setIframe('./samples/playground.html?sample=js-local-context-restrictions')"
3191            >
3192              Playground
3193            </button>
3194            <button
3195              class="button"
3196              onclick="setIframe('./samples/js-local-context-restrictions/iframe/index.html')"
3197            >
3198              Iframe
3199            </button>
3200            <button
3201              class="button"
3202              onclick="setIframe('./samples/js-local-context-restrictions/app/dist/index.html')"
3203            >
3204              App
3205            </button>
3206            <a
3207              class="button"
3208              href="https://github.com/googlemaps/js-samples/tree/main/samples/js-local-context-restrictions"
3209              >Code</a
3210            >
3211          </div>
3212        </div>
3213
3214        <div class="card">
3215          <h4 class="card-header">js-local-context-styles</h4>
3216          <div class="card-footer">
3217            <button
3218              class="button"
3219              onclick="setIframe('./samples/playground.html?sample=js-local-context-styles')"
3220            >
3221              Playground
3222            </button>
3223            <button
3224              class="button"
3225              onclick="setIframe('./samples/js-local-context-styles/iframe/index.html')"
3226            >
3227              Iframe
3228            </button>
3229            <button
3230              class="button"
3231              onclick="setIframe('./samples/js-local-context-styles/app/dist/index.html')"
3232            >
3233              App
3234            </button>
3235            <a
3236              class="button"
3237              href="https://github.com/googlemaps/js-samples/tree/main/samples/js-local-context-styles"
3238              >Code</a
3239            >
3240          </div>
3241        </div>
3242
3243        <div class="card">
3244          <h4 class="card-header">map-coordinates</h4>
3245          <div class="card-footer">
3246         
3246   <button
3247              class="button"
3248              onclick="setIframe('./samples/playground.html?sample=map-coordinates')"
3249            >
3250              Playground
3251            </button>
3252            <button
3253              class="button"
3254              onclick="setIframe('./samples/map-coordinates/iframe/index.html')"
3255            >
3256              Iframe
3257            </button>
3258            <button
3259              class="button"
3260              onclick="setIframe('./samples/map-coordinates/app/dist/index.html')"
3261            >
3262              App
3263            </button>
3264            <a
3265              class="button"
3266              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-coordinates"
3267              >Code</a
3268            >
3269          </div>
3270        </div>
3271
3272        <div class="card">
3273          <h4 class="card-header">map-events</h4>
3274          <div class="card-footer">
3275            <button
3276              class="button"
3277              onclick="setIframe('./samples/playground.html?sample=map-events')"
3278            >
3279              Playground
3280            </button>
3281            <button
3282              class="button"
3283              onclick="setIframe('./samples/map-events/iframe/index.html')"
3284            >
3285              Iframe
3286            </button>
3287            <button
3288              class="button"
3289              onclick="setIframe('./samples/map-events/app/dist/index.html')"
3290            >
3291              App
3292            </button>
3293            <a
3294              class="button"
3295              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-events"
3296              >Code</a
3297            >
3298          </div>
3299        </div>
3300
3301        <div class="card">
3302          <h4 class="card-header">map-geolocation</h4>
3303          <div class="card-footer">
3304            <button
3305              class="button"
3306              onclick="setIframe('./samples/playground.html?sample=map-geolocation')"
3307            >
3308              Playground
3309            </button>
3310            <button
3311              class="button"
3312              onclick="setIframe('./samples/map-geolocation/iframe/index.html')"
3313            >
3314              Iframe
3315            </button>
3316            <button
3317              class="button"
3318              onclick="setIframe('./samples/map-geolocation/app/dist/index.html')"
3319            >
3320              App
3321            </button>
3322            <a
3323              class="button"
3324              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-geolocation"
3325              >Code</a
3326            >
3327          </div>
3328        </div>
3329
3330        <div class="card">
3331          <h4 class="card-header">map-id</h4>
3332          <div class="card-footer">
3333            <button
3334              class="button"
3335              onclick="setIframe('./samples/playground.html?sample=map-id')"
3336            >
3337              Playground
3338            </button>
3339            <button
3340              class="button"
3341              onclick="setIframe('./samples/map-id/iframe/index.html')"
3342            >
3343              Iframe
3344            </button>
3345            <button
3346              class="button"
3347              onclick="setIframe('./samples/map-id/app/dist/index.html')"
3348            >
3349              App
3350            </button>
3351            <a
3352              class="button"
3353              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-id"
3354              >Code</a
3355            >
3356          </div>
3357        </div>
3358
3359        <div class="card">
3360          <h4 class="card-header">map-language</h4>
3361          <div class="card-footer">
3362            <button
3363              class="button"
3364              onclick="setIframe('./samples/playground.html?sample=map-language')"
3365            >
3366              Playground
3367            </button>
3368            <button
3369              class="button"
3370              onclick="setIframe('./samples/map-language/iframe/index.html')"
3371            >
3372              Iframe
3373            </button>
3374            <button
3375              class="button"
3376              onclick="setIframe('./samples/map-language/app/dist/index.html')"
3377            >
3378              App
3379            </button>
3380            <a
3381              class="button"
3382              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-language"
3383              >Code</a
3384            >
3385          </div>
3386        </div>
3387
3388        <div class="card">
3389          <h4 class="card-header">map-latlng-literal</h4>
3390          <div class="card-footer">
3391            <button
3392              class="button"
3393              onclick="setIframe('./samples/playground.html?sample=map-latlng-literal')"
3394            >
3395              Playground
3396            </button>
3397            <button
3398              class="button"
3399              onclick="setIframe('./samples/map-latlng-literal/iframe/index.html')"
3400            >
3401              Iframe
3402            </button>
3403            <button
3404              class="button"
3405              onclick="setIframe('./samples/map-latlng-literal/app/dist/index.html')"
3406            >
3407              App
3408            </button>
3409            <a
3410              class="button"
3411              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-latlng-literal"
3412              >Code</a
3413            >
3414          </div>
3415        </div>
3416
3417        <div class="card">
3418          <h4 class="card-header">map-projection-simple</h4>
3419          <div class="card-footer">
3420            <button
3421              class="button"
3422              onclick="setIframe('./samples/playground.html?sample=map-projection-simple')"
3423            >
3424              Playground
3425            </button>
3426            <button
3427              class="button"
3428              onclick="setIframe('./samples/map-projection-simple/iframe/index.html')"
3429            >
3430              Iframe
3431            </button>
3432            <button
3433              class="button"
3434              onclick="setIframe('./samples/map-projection-simple/app/dist/index.html')"
3435            >
3436              App
3437            </button>
3438            <a
3439              class="button"
3440              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-projection-simple"
3441              >Code</a
3442            >
3443          </div>
3444        </div>
3445
3446        <div class="card">
3447          <h4 class="card-header">map-puzzle</h4>
3448          <div class="card-footer">
3449            <button
3450              class="button"
3451              onclick="setIframe('./samples/playground.html?sample=map-puzzle')"
3452            >
3453              Playground
3454            </button>
3455            <button
3456              class="button"
3457              onclick="setIframe('./samples/map-puzzle/iframe/index.html')"
3458            >
3459              Iframe
3460            </button>
3461            <button
3462              class="button"
3463              onclick="setIframe('./samples/map-puzzle/app/dist/index.html')"
3464            >
3465              App
3466            </button>
3467            <a
3468              class="button"
3469              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-puzzle"
3470              >Code</a
3471            >
3472          </div>
3473        </div>
3474
3475        <div class="card">
3476          <h4 class="card-header">map-rtl</h4>
3477          <div class="card-footer">
3478            <button
3479              class="button"
3480              onclick="setIframe('./samples/playground.html?sample=map-rtl')"
3481            >
3482              Playground
3483            </button>
3484            <button
3485              class="button"
3486              onclick="setIframe('./samples/map-rtl/iframe/index.html')"
3487            >
3488              Iframe
3489            </button>
3490            <button
3491              class="button"
3492              onclick="setIframe('./samples/map-rtl/app/dist/index.html')"
3493            >
3494              App
3495            </button>
3496            <a
3497              class="button"
3498              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-rtl"
3499              >Code</a
3500            >
3501          </div>
3502        </div>
3503
3504        <div class="card">
3505          <h4 class="card-header">map-simple</h4>
3506          <div class="card-footer">
3507            <button
3508              class="button"
3509              onclick="setIframe('./samples/playground.html?sample=map-simple')"
3510            >
3511              Playground
3512            </button>
3513            <button
3514              class="button"
3515              onclick="setIframe('./samples/map-simple/iframe/index.html')"
3516            >
3517              Iframe
3518            </button>
3519            <button
3520              class="button"
3521              onclick="setIframe('./samples/map-simple/app/dist/index.html')"
3522            >
3523              App
3524            </button>
3525            <a
3526              class="button"
3527              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-simple"
3528              >Code</a
3529            >
3530          </div>
3531        </div>
3532
3533        <div class="card">
3534          <h4 class="card-header">map-sync</h4>
3535          <div class="card-footer">
3536            <button
3537              class="button"
3538              onclick="setIframe('./samples/playground.html?sample=map-sync')"
3539            >
3540              Playground
3541            </button>
3542            <button
3543              class="button"
3544              onclick="setIframe('./samples/map-sync/iframe/index.html')"
3545            >
3546              Iframe
3547            </button>
3548            <button
3549              class="button"
3550              onclick="setIframe('./samples/map-sync/app/dist/index.html')"
3551            >
3552              App
3553            </button>
3554            <a
3555              class="button"
3556              href="https://github.com/googlemaps/js-samples/tree/main/samples/map-sync"
3557              >Code</a
3558            >
3559          </div>
3560        </div>
3561
3562        <div class="card">
3563          <h4 class="card-header">maptype-base</h4>
3564          <div class="card-footer">
3565            <button
3566              class="button"
3567              onclick="setIframe('./samples/playground.html?sample=maptype-base')"
3568            >
3569              Playground
3570            </button>
3571            <button
3572              class="button"
3573              onclick="setIframe('./samples/maptype-base/iframe/index.html')"
3574            >
3575              Iframe
3576            </button>
3577            <button
3578              class="button"
3579              onclick="setIframe('./samples/maptype-base/app/dist/index.html')"
3580            >
3581              App
3582            </button>
3583            <a
3584              class="button"
3585              href="https://github.com/googlemaps/js-samples/tree/main/samples/maptype-base"
3586              >Code</a
3587            >
3588          </div>
3589        </div>
3590
3591        <div class="card">
3592          <h4 class="card-header">maptype-image</h4>
3593          <div class="card-footer">
3594            <button
3595              class="button"
3596              onclick="setIframe('./samples/playground.html?sample=maptype-image')"
3597            >
3598              Playground
3599            </button>
3600            <button
3601              class="button"
3602              onclick="setIframe('./samples/maptype-image/iframe/index.html')"
3603            >
3604              Iframe
3605            </button>
3606            <button
3607              class="button"
3608              onclick="setIframe('./samples/maptype-image/app/dist/index.html')"
3609            >
3610              App
3611            </button>
3612            <a
3613              class="button"
3614              href="https://github.com/googlemaps/js-samples/tree/main/samples/maptype-image"
3615              >Code</a
3616            >
3617          </div>
3618        </div>
3619
3620        <div class="card">
3621          <h4 class="card-header">maptype-image-overlay</h4>
3622          <div class="card-footer">
3623            <button
3624              class="button"
3625              onclick="setIframe('./samples/playground.html?sample=maptype-image-overlay')"
3626            >
3627              Playground
3628            </button>
3629            <button
3630              class="button"
3631              onclick="setIframe('./samples/maptype-image-overlay/iframe/index.html')"
3632            >
3633              Iframe
3634            </button>
3635            <button
3636              class="button"
3637              onclick="setIframe('./samples/maptype-image-overlay/app/dist/index.html')"
3638            >
3639              App
3640            </button>
3641            <a
3642              class="button"
3643              href="https://github.com/googlemaps/js-samples/tree/main/samples/maptype-image-overlay"
3644              >Code</a
3645            >
3646          </div>
3647        </div>
3648
3649        <div class="card">
3650          <h4 class="card-header">maptype-overlay</h4>
3651          <div class="card-footer">
3652            <button
3653              class="button"
3654              onclick="setIframe('./samples/playground.html?sample=maptype-overlay')"
3655            >
3656              Playground
3657            </button>
3658            <button
3659              class="button"
3660              onclick="setIframe('./samples/maptype-overlay/iframe/index.html')"
3661            >
3662              Iframe
3663            </button>
3664            <button
3665              class="button"
3666              onclick="setIframe('./samples/maptype-overlay/app/dist/index.html')"
3667            >
3668              App
3669            </button>
3670            <a
3671              class="button"
3672              href="https://github.com/googlemaps/js-samples/tree/main/samples/maptype-overlay"
3673              >Code</a
3674            >
3675          </div>
3676        </div>
3677
3678        <div class="card">
3679          <h4 class="card-header">maptype-styled-simple</h4>
3680          <div class="card-footer">
3681            <button
3682              class="button"
3683              onclick="setIframe('./samples/playground.html?sample=maptype-styled-simple')"
3684            >
3685              Playground
3686            </button>
3687            <button
3688              class="button"
3689              onclick="setIframe('./samples/maptype-styled-simple/iframe/index.html')"
3690            >
3691              Iframe
3692            </button>
3693            <button
3694              class="button"
3695              onclick="setIframe('./samples/maptype-styled-simple/app/dist/index.html')"
3696            >
3697              App
3698            </button>
3699            <a
3700              class="button"
3701              href="https://github.com/googlemaps/js-samples/tree/main/samples/maptype-styled-simple"
3702              >Code</a
3703            >
3704          </div>
3705        </div>
3706
3707        <div class="card">
3708          <h4 class="card-header">marker-accessibility</h4>
3709          <div class="card-footer">
3710            <button
3711              class="button"
3712              onclick="setIframe('./samples/playground.html?sample=marker-accessibility')"
3713            >
3714              Playground
3715            </button>
3716            <button
3717              class="button"
3718              onclick="setIframe('./samples/marker-accessibility/iframe/index.html')"
3719            >
3720              Iframe
3721            </button>
3722            <button
3723              class="button"
3724              onclick="setIframe('./samples/marker-accessibility/app/dist/index.html')"
3725            >
3726              App
3727            </button>
3728            <a
3729              class="button"
3730              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-accessibility"
3731              >Code</a
3732            >
3733          </div>
3734        </div>
3735
3736        <div class="card">
3737          <h4 class="card-header">marker-animations</h4>
3738          <div class="card-footer">
3739            <button
3740              class="button"
3741              onclick="setIframe('./samples/playground.html?sample=marker-animations')"
3742            >
3743              Playground
3744            </button>
3745            <button
3746              class="button"
3747              onclick="setIframe('./samples/marker-animations/iframe/index.html')"
3748            >
3749              Iframe
3750            </button>
3751            <button
3752              class="button"
3753              onclick="setIframe('./samples/marker-animations/app/dist/index.html')"
3754            >
3755              App
3756            </button>
3757            <a
3758              class="button"
3759              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-animations"
3760              >Code</a
3761            >
3762          </div>
3763        </div>
3764
3765        <div class="card">
3766          <h4 class="card-header">marker-animations-iteration</h4>
3767          <div class="card-footer">
3768            <button
3769              class="button"
3770              onclick="setIframe('./samples/playground.html?sample=marker-animations-iteration')"
3771            >
3772              Playground
3773            </button>
3774            <button
3775              class="button"
3776              onclick="setIframe('./samples/marker-animations-iteration/i
3776frame/index.html')"
3777            >
3778              Iframe
3779            </button>
3780            <button
3781              class="button"
3782              onclick="setIframe('./samples/marker-animations-iteration/app/dist/index.html')"
3783            >
3784              App
3785            </button>
3786            <a
3787              class="button"
3788              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-animations-iteration"
3789              >Code</a
3790            >
3791          </div>
3792        </div>
3793
3794        <div class="card">
3795          <h4 class="card-header">marker-clustering</h4>
3796          <div class="card-footer">
3797            <button
3798              class="button"
3799              onclick="setIframe('./samples/playground.html?sample=marker-clustering')"
3800            >
3801              Playground
3802            </button>
3803            <button
3804              class="button"
3805              onclick="setIframe('./samples/marker-clustering/iframe/index.html')"
3806            >
3807              Iframe
3808            </button>
3809            <button
3810              class="button"
3811              onclick="setIframe('./samples/marker-clustering/app/dist/index.html')"
3812            >
3813              App
3814            </button>
3815            <a
3816              class="button"
3817              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-clustering"
3818              >Code</a
3819            >
3820          </div>
3821        </div>
3822
3823        <div class="card">
3824          <h4 class="card-header">marker-labels</h4>
3825          <div class="card-footer">
3826            <button
3827              class="button"
3828              onclick="setIframe('./samples/playground.html?sample=marker-labels')"
3829            >
3830              Playground
3831            </button>
3832            <button
3833              class="button"
3834              onclick="setIframe('./samples/marker-labels/iframe/index.html')"
3835            >
3836              Iframe
3837            </button>
3838            <button
3839              class="button"
3840              onclick="setIframe('./samples/marker-labels/app/dist/index.html')"
3841            >
3842              App
3843            </button>
3844            <a
3845              class="button"
3846              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-labels"
3847              >Code</a
3848            >
3849          </div>
3850        </div>
3851
3852        <div class="card">
3853          <h4 class="card-header">marker-modern</h4>
3854          <div class="card-footer">
3855            <button
3856              class="button"
3857              onclick="setIframe('./samples/playground.html?sample=marker-modern')"
3858            >
3859              Playground
3860            </button>
3861            <button
3862              class="button"
3863              onclick="setIframe('./samples/marker-modern/iframe/index.html')"
3864            >
3865              Iframe
3866            </button>
3867            <button
3868              class="button"
3869              onclick="setIframe('./samples/marker-modern/app/dist/index.html')"
3870            >
3871              App
3872            </button>
3873            <a
3874              class="button"
3875              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-modern"
3876              >Code</a
3877            >
3878          </div>
3879        </div>
3880
3881        <div class="card">
3882          <h4 class="card-header">marker-remove</h4>
3883          <div class="card-footer">
3884            <button
3885              class="button"
3886              onclick="setIframe('./samples/playground.html?sample=marker-remove')"
3887            >
3888              Playground
3889            </button>
3890            <button
3891              class="button"
3892              onclick="setIframe('./samples/marker-remove/iframe/index.html')"
3893            >
3894              Iframe
3895            </button>
3896            <button
3897              class="button"
3898              onclick="setIframe('./samples/marker-remove/app/dist/index.html')"
3899            >
3900              App
3901            </button>
3902            <a
3903              class="button"
3904              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-remove"
3905              >Code</a
3906            >
3907          </div>
3908        </div>
3909
3910        <div class="card">
3911          <h4 class="card-header">marker-simple</h4>
3912          <div class="card-footer">
3913            <button
3914              class="button"
3915              onclick="setIframe('./samples/playground.html?sample=marker-simple')"
3916            >
3917              Playground
3918            </button>
3919            <button
3920              class="button"
3921              onclick="setIframe('./samples/marker-simple/iframe/index.html')"
3922            >
3923              Iframe
3924            </button>
3925            <button
3926              class="button"
3927              onclick="setIframe('./samples/marker-simple/app/dist/index.html')"
3928            >
3929              App
3930            </button>
3931            <a
3932              class="button"
3933              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-simple"
3934              >Code</a
3935            >
3936          </div>
3937        </div>
3938
3939        <div class="card">
3940          <h4 class="card-header">marker-symbol-custom</h4>
3941          <div class="card-footer">
3942            <button
3943              class="button"
3944              onclick="setIframe('./samples/playground.html?sample=marker-symbol-custom')"
3945            >
3946              Playground
3947            </button>
3948            <button
3949              class="button"
3950              onclick="setIframe('./samples/marker-symbol-custom/iframe/index.html')"
3951            >
3952              Iframe
3953            </button>
3954            <button
3955              class="button"
3956              onclick="setIframe('./samples/marker-symbol-custom/app/dist/index.html')"
3957            >
3958              App
3959            </button>
3960            <a
3961              class="button"
3962              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-symbol-custom"
3963              >Code</a
3964            >
3965          </div>
3966        </div>
3967
3968        <div class="card">
3969          <h4 class="card-header">marker-symbol-predefined</h4>
3970          <div class="card-footer">
3971            <button
3972              class="button"
3973              onclick="setIframe('./samples/playground.html?sample=marker-symbol-predefined')"
3974            >
3975              Playground
3976            </button>
3977            <button
3978              class="button"
3979              onclick="setIframe('./samples/marker-symbol-predefined/iframe/index.html')"
3980            >
3981              Iframe
3982            </button>
3983            <button
3984              class="button"
3985              onclick="setIframe('./samples/marker-symbol-predefined/app/dist/index.html')"
3986            >
3987              App
3988            </button>
3989            <a
3990              class="button"
3991              href="https://github.com/googlemaps/js-samples/tree/main/samples/marker-symbol-predefined"
3992              >Code</a
3993            >
3994          </div>
3995        </div>
3996
3997        <div class="card">
3998          <h4 class="card-header">maxzoom-simple</h4>
3999          <div class="card-footer">
4000            <button
4001              class="button"
4002              onclick="setIframe('./samples/playground.html?sample=maxzoom-simple')"
4003            >
4004              Playground
4005            </button>
4006            <button
4007              class="button"
4008              onclick="setIframe('./samples/maxzoom-simple/iframe/index.html')"
4009            >
4010              Iframe
4011            </button>
4012            <button
4013              class="button"
4014              onclick="setIframe('./samples/maxzoom-simple/app/dist/index.html')"
4015            >
4016              App
4017            </button>
4018            <a
4019              class="button"
4020              href="https://github.com/googlemaps/js-samples/tree/main/samples/maxzoom-simple"
4021              >Code</a
4022            >
4023          </div>
4024        </div>
4025
4026        <div class="card">
4027          <h4 class="card-header">move-camera-ease</h4>
4028          <div class="card-footer">
4029            <button
4030              class="button"
4031              onclick="setIframe('./samples/playground.html?sample=move-camera-ease')"
4032            >
4033              Playground
4034            </button>
4035            <button
4036              class="button"
4037              onclick="setIframe('./samples/move-camera-ease/iframe/index.html')"
4038            >
4039              Iframe
4040            </button>
4041            <button
4042              class="button"
4043              onclick="setIframe('./samples/move-camera-ease/app/dist/index.html')"
4044            >
4045              App
4046            </button>
4047            <a
4048              class="button"
4049              href="https://github.com/googlemaps/js-samples/tree/main/samples/move-camera-ease"
4050              >Code</a
4051            >
4052          </div>
4053        </div>
4054
4055        <div class="card">
4056          <h4 class="card-header">overlay-hideshow</h4>
4057          <div class="card-footer">
4058            <button
4059              class="button"
4060              onclick="setIframe('./samples/playground.html?sample=overlay-hideshow')"
4061            >
4062              Playground
4063            </button>
4064            <button
4065              class="button"
4066              onclick="setIframe('./samples/overlay-hideshow/iframe/index.html')"
4067            >
4068              Iframe
4069            </button>
4070            <button
4071              class="button"
4072              onclick="setIframe('./samples/overlay-hideshow/app/dist/index.html')"
4073            >
4074              App
4075            </button>
4076            <a
4077              class="button"
4078              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-hideshow"
4079              >Code</a
4080            >
4081          </div>
4082        </div>
4083
4084        <div class="card">
4085          <h4 class="card-header">overlay-popup</h4>
4086          <div class="card-footer">
4087            <button
4088              class="button"
4089              onclick="setIframe('./samples/playground.html?sample=overlay-popup')"
4090            >
4091              Playground
4092            </button>
4093            <button
4094              class="button"
4095              onclick="setIframe('./samples/overlay-popup/iframe/index.html')"
4096            >
4097              Iframe
4098            </button>
4099            <button
4100              class="button"
4101              onclick="setIframe('./samples/overlay-popup/app/dist/index.html')"
4102            >
4103              App
4104            </button>
4105            <a
4106              class="button"
4107              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-popup"
4108              >Code</a
4109            >
4110          </div>
4111        </div>
4112
4113        <div class="card">
4114          <h4 class="card-header">overlay-remove</h4>
4115          <div class="card-footer">
4116            <button
4117              class="button"
4118              onclick="setIframe('./samples/playground.html?sample=overlay-remove')"
4119            >
4120              Playground
4121            </button>
4122            <button
4123              class="button"
4124              onclick="setIframe('./samples/overlay-remove/iframe/index.html')"
4125            >
4126              Iframe
4127            </button>
4128            <button
4129              class="button"
4130              onclick="setIframe('./samples/overlay-remove/app/dist/index.html')"
4131            >
4132              App
4133            </button>
4134            <a
4135              class="button"
4136              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-remove"
4137              >Code</a
4138            >
4139          </div>
4140        </div>
4141
4142        <div class="card">
4143          <h4 class="card-header">overlay-simple</h4>
4144          <div class="card-footer">
4145            <button
4146              class="button"
4147              onclick="setIframe('./samples/playground.html?sample=overlay-simple')"
4148            >
4149              Playground
4150            </button>
4151            <button
4152              class="button"
4153              onclick="setIframe('./samples/overlay-simple/iframe/index.html')"
4154            >
4155              Iframe
4156            </button>
4157            <button
4158              class="button"
4159              onclick="setIframe('./samples/overlay-simple/app/dist/index.html')"
4160            >
4161              App
4162            </button>
4163            <a
4164              class="button"
4165              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-simple"
4166              >Code</a
4167            >
4168          </div>
4169        </div>
4170
4171        <div class="card">
4172          <h4 class="card-header">overlay-symbol-animate</h4>
4173          <div class="card-footer">
4174            <button
4175              class="button"
4176              onclick="setIframe('./samples/playground.html?sample=overlay-symbol-animate')"
4177            >
4178              Playground
4179            </button>
4180            <button
4181              class="button"
4182              onclick="setIframe('./samples/overlay-symbol-animate/iframe/index.html')"
4183            >
4184              Iframe
4185            </button>
4186            <button
4187              class="button"
4188              onclick="setIframe('./samples/overlay-symbol-animate/app/dist/index.html')"
4189            >
4190              App
4191            </button>
4192            <a
4193              class="button"
4194              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-symbol-animate"
4195              >Code</a
4196            >
4197          </div>
4198        </div>
4199
4200        <div class="card">
4201          <h4 class="card-header">overlay-symbol-arrow</h4>
4202          <div class="card-footer">
4203            <button
4204              class="button"
4205              onclick="setIframe('./samples/playground.html?sample=overlay-symbol-arrow')"
4206            >
4207              Playground
4208            </button>
4209            <button
4210              class="button"
4211              onclick="setIframe('./samples/overlay-symbol-arrow/iframe/index.html')"
4212            >
4213              Iframe
4214            </button>
4215            <button
4216              class="button"
4217              onclick="setIframe('./samples/overlay-symbol-arrow/app/dist/index.html')"
4218            >
4219              App
4220            </button>
4221            <a
4222              class="button"
4223              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-symbol-arrow"
4224              >Code</a
4225            >
4226          </div>
4227        </div>
4228
4229        <div class="card">
4230          <h4 class="card-header">overlay-symbol-custom</h4>
4231          <div class="card-footer">
4232            <button
4233              class="button"
4234              onclick="setIframe('./samples/playground.html?sample=overlay-symbol-custom')"
4235            >
4236              Playground
4237            </button>
4238            <button
4239              class="button"
4240              onclick="setIframe('./samples/overlay-symbol-custom/iframe/index.html')"
4241            >
4242              Iframe
4243            </button>
4244            <button
4245              class="button"
4246              onclick="setIframe('./samples/overlay-symbol-custom/app/dist/index.html')"
4247            >
4248              App
4249            </button>
4250            <a
4251              class="button"
4252              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-symbol-custom"
4253              >Code</a
4254            >
4255          </div>
4256        </div>
4257
4258        <div class="card">
4259          <h4 class="card-header">overlay-symbol-dashed</h4>
4260          <div class="card-footer">
4261            <button
4262              class="button"
4263              onclick="setIframe('./samples/playground.html?sample=overlay-symbol-dashed')"
4264            >
4265              Playground
4266            </button>
4267            <button
4268              class="button"
4269              onclick="setIframe('./samples/overlay-symbol-dashed/iframe/index.html')"
4270            >
4271              Iframe
4272            </button>
4273            <button
4274              class="button"
4275              onclick="setIframe('./samples/overlay-symbol-dashed/app/dist/index.html')"
4276            >
4277              App
4278            </button>
4279            <a
4280              class="button"
4281              href="https://github.com/googlemaps/js-samples/tree/main/samples/overlay-symbol-dashed"
4282              >Code</a
4283            >
4284          </div>
4285        </div>
4286
4287        <div class="card">
4288          <h4 class="card-header">place-autocomplete-data-session</h4>
4289          <div class="card-footer">
4290            <button
4291              class="button"
4292              onclick="setIframe('./samples/playground.html?sample=place-autocomplete-data-session')"
4293            >
4294              Playground
4295            </button>
4296            <button
4297              class="button"
4298              onclick="setIframe('./samples/place-autocomplete-data-session/iframe/index.html')"
4299 
4299           >
4300              Iframe
4301            </button>
4302            <button
4303              class="button"
4304              onclick="setIframe('./samples/place-autocomplete-data-session/app/dist/index.html')"
4305            >
4306              App
4307            </button>
4308            <a
4309              class="button"
4310              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-autocomplete-data-session"
4311              >Code</a
4312            >
4313          </div>
4314        </div>
4315
4316        <div class="card">
4317          <h4 class="card-header">place-autocomplete-data-simple</h4>
4318          <div class="card-footer">
4319            <button
4320              class="button"
4321              onclick="setIframe('./samples/playground.html?sample=place-autocomplete-data-simple')"
4322            >
4323              Playground
4324            </button>
4325            <button
4326              class="button"
4327              onclick="setIframe('./samples/place-autocomplete-data-simple/iframe/index.html')"
4328            >
4329              Iframe
4330            </button>
4331            <button
4332              class="button"
4333              onclick="setIframe('./samples/place-autocomplete-data-simple/app/dist/index.html')"
4334            >
4335              App
4336            </button>
4337            <a
4338              class="button"
4339              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-autocomplete-data-simple"
4340              >Code</a
4341            >
4342          </div>
4343        </div>
4344
4345        <div class="card">
4346          <h4 class="card-header">place-autocomplete-element</h4>
4347          <div class="card-footer">
4348            <button
4349              class="button"
4350              onclick="setIframe('./samples/playground.html?sample=place-autocomplete-element')"
4351            >
4352              Playground
4353            </button>
4354            <button
4355              class="button"
4356              onclick="setIframe('./samples/place-autocomplete-element/iframe/index.html')"
4357            >
4358              Iframe
4359            </button>
4360            <button
4361              class="button"
4362              onclick="setIframe('./samples/place-autocomplete-element/app/dist/index.html')"
4363            >
4364              App
4365            </button>
4366            <a
4367              class="button"
4368              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-autocomplete-element"
4369              >Code</a
4370            >
4371          </div>
4372        </div>
4373
4374        <div class="card">
4375          <h4 class="card-header">place-autocomplete-map</h4>
4376          <div class="card-footer">
4377            <button
4378              class="button"
4379              onclick="setIframe('./samples/playground.html?sample=place-autocomplete-map')"
4380            >
4381              Playground
4382            </button>
4383            <button
4384              class="button"
4385              onclick="setIframe('./samples/place-autocomplete-map/iframe/index.html')"
4386            >
4387              Iframe
4388            </button>
4389            <button
4390              class="button"
4391              onclick="setIframe('./samples/place-autocomplete-map/app/dist/index.html')"
4392            >
4393              App
4394            </button>
4395            <a
4396              class="button"
4397              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-autocomplete-map"
4398              >Code</a
4399            >
4400          </div>
4401        </div>
4402
4403        <div class="card">
4404          <h4 class="card-header">place-class</h4>
4405          <div class="card-footer">
4406            <button
4407              class="button"
4408              onclick="setIframe('./samples/playground.html?sample=place-class')"
4409            >
4410              Playground
4411            </button>
4412            <button
4413              class="button"
4414              onclick="setIframe('./samples/place-class/iframe/index.html')"
4415            >
4416              Iframe
4417            </button>
4418            <button
4419              class="button"
4420              onclick="setIframe('./samples/place-class/app/dist/index.html')"
4421            >
4422              App
4423            </button>
4424            <a
4425              class="button"
4426              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-class"
4427              >Code</a
4428            >
4429          </div>
4430        </div>
4431
4432        <div class="card">
4433          <h4 class="card-header">place-details</h4>
4434          <div class="card-footer">
4435            <button
4436              class="button"
4437              onclick="setIframe('./samples/playground.html?sample=place-details')"
4438            >
4439              Playground
4440            </button>
4441            <button
4442              class="button"
4443              onclick="setIframe('./samples/place-details/iframe/index.html')"
4444            >
4445              Iframe
4446            </button>
4447            <button
4448              class="button"
4449              onclick="setIframe('./samples/place-details/app/dist/index.html')"
4450            >
4451              App
4452            </button>
4453            <a
4454              class="button"
4455              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-details"
4456              >Code</a
4457            >
4458          </div>
4459        </div>
4460
4461        <div class="card">
4462          <h4 class="card-header">place-nearby-search</h4>
4463          <div class="card-footer">
4464            <button
4465              class="button"
4466              onclick="setIframe('./samples/playground.html?sample=place-nearby-search')"
4467            >
4468              Playground
4469            </button>
4470            <button
4471              class="button"
4472              onclick="setIframe('./samples/place-nearby-search/iframe/index.html')"
4473            >
4474              Iframe
4475            </button>
4476            <button
4477              class="button"
4478              onclick="setIframe('./samples/place-nearby-search/app/dist/index.html')"
4479            >
4480              App
4481            </button>
4482            <a
4483              class="button"
4484              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-nearby-search"
4485              >Code</a
4486            >
4487          </div>
4488        </div>
4489
4490        <div class="card">
4491          <h4 class="card-header">place-photos</h4>
4492          <div class="card-footer">
4493            <button
4494              class="button"
4495              onclick="setIframe('./samples/playground.html?sample=place-photos')"
4496            >
4497              Playground
4498            </button>
4499            <button
4500              class="button"
4501              onclick="setIframe('./samples/place-photos/iframe/index.html')"
4502            >
4503              Iframe
4504            </button>
4505            <button
4506              class="button"
4507              onclick="setIframe('./samples/place-photos/app/dist/index.html')"
4508            >
4509              App
4510            </button>
4511            <a
4512              class="button"
4513              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-photos"
4514              >Code</a
4515            >
4516          </div>
4517        </div>
4518
4519        <div class="card">
4520          <h4 class="card-header">place-reviews</h4>
4521          <div class="card-footer">
4522            <button
4523              class="button"
4524              onclick="setIframe('./samples/playground.html?sample=place-reviews')"
4525            >
4526              Playground
4527            </button>
4528            <button
4529              class="button"
4530              onclick="setIframe('./samples/place-reviews/iframe/index.html')"
4531            >
4532              Iframe
4533            </button>
4534            <button
4535              class="button"
4536              onclick="setIframe('./samples/place-reviews/app/dist/index.html')"
4537            >
4538              App
4539            </button>
4540            <a
4541              class="button"
4542              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-reviews"
4543              >Code</a
4544            >
4545          </div>
4546        </div>
4547
4548        <div class="card">
4549          <h4 class="card-header">place-search</h4>
4550          <div class="card-footer">
4551            <button
4552              class="button"
4553              onclick="setIframe('./samples/playground.html?sample=place-search')"
4554            >
4555              Playground
4556            </button>
4557            <button
4558              class="button"
4559              onclick="setIframe('./samples/place-search/iframe/index.html')"
4560            >
4561              Iframe
4562            </button>
4563            <button
4564              class="button"
4565              onclick="setIframe('./samples/place-search/app/dist/index.html')"
4566            >
4567              App
4568            </button>
4569            <a
4570              class="button"
4571              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-search"
4572              >Code</a
4573            >
4574          </div>
4575        </div>
4576
4577        <div class="card">
4578          <h4 class="card-header">place-search-pagination</h4>
4579          <div class="card-footer">
4580            <button
4581              class="button"
4582              onclick="setIframe('./samples/playground.html?sample=place-search-pagination')"
4583            >
4584              Playground
4585            </button>
4586            <button
4587              class="button"
4588              onclick="setIframe('./samples/place-search-pagination/iframe/index.html')"
4589            >
4590              Iframe
4591            </button>
4592            <button
4593              class="button"
4594              onclick="setIframe('./samples/place-search-pagination/app/dist/index.html')"
4595            >
4596              App
4597            </button>
4598            <a
4599              class="button"
4600              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-search-pagination"
4601              >Code</a
4602            >
4603          </div>
4604        </div>
4605
4606        <div class="card">
4607          <h4 class="card-header">place-text-search</h4>
4608          <div class="card-footer">
4609            <button
4610              class="button"
4611              onclick="setIframe('./samples/playground.html?sample=place-text-search')"
4612            >
4613              Playground
4614            </button>
4615            <button
4616              class="button"
4617              onclick="setIframe('./samples/place-text-search/iframe/index.html')"
4618            >
4619              Iframe
4620            </button>
4621            <button
4622              class="button"
4623              onclick="setIframe('./samples/place-text-search/app/dist/index.html')"
4624            >
4625              App
4626            </button>
4627            <a
4628              class="button"
4629              href="https://github.com/googlemaps/js-samples/tree/main/samples/place-text-search"
4630              >Code</a
4631            >
4632          </div>
4633        </div>
4634
4635        <div class="card">
4636          <h4 class="card-header">places-autocomplete</h4>
4637          <div class="card-footer">
4638            <button
4639              class="button"
4640              onclick="setIframe('./samples/playground.html?sample=places-autocomplete')"
4641            >
4642              Playground
4643            </button>
4644            <button
4645              class="button"
4646              onclick="setIframe('./samples/places-autocomplete/iframe/index.html')"
4647            >
4648              Iframe
4649            </button>
4650            <button
4651              class="button"
4652              onclick="setIframe('./samples/places-autocomplete/app/dist/index.html')"
4653            >
4654              App
4655            </button>
4656            <a
4657              class="button"
4658              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-autocomplete"
4659              >Code</a
4660            >
4661          </div>
4662        </div>
4663
4664        <div class="card">
4665          <h4 class="card-header">places-autocomplete-addressform</h4>
4666          <div class="card-footer">
4667            <button
4668              class="button"
4669              onclick="setIframe('./samples/playground.html?sample=places-autocomplete-addressform')"
4670            >
4671              Playground
4672            </button>
4673            <button
4674              class="button"
4675              onclick="setIframe('./samples/places-autocomplete-addressform/iframe/index.html')"
4676            >
4677              Iframe
4678            </button>
4679            <button
4680              class="button"
4681              onclick="setIframe('./samples/places-autocomplete-addressform/app/dist/index.html')"
4682            >
4683              App
4684            </button>
4685            <a
4686              class="button"
4687              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-autocomplete-addressform"
4688              >Code</a
4689            >
4690          </div>
4691        </div>
4692
4693        <div class="card">
4694          <h4 class="card-header">places-autocomplete-directions</h4>
4695          <div class="card-footer">
4696            <button
4697              class="button"
4698              onclick="setIframe('./samples/playground.html?sample=places-autocomplete-directions')"
4699            >
4700              Playground
4701            </button>
4702            <button
4703              class="button"
4704              onclick="setIframe('./samples/places-autocomplete-directions/iframe/index.html')"
4705            >
4706              Iframe
4707            </button>
4708            <button
4709              class="button"
4710              onclick="setIframe('./samples/places-autocomplete-directions/app/dist/index.html')"
4711            >
4712              App
4713            </button>
4714            <a
4715              class="button"
4716              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-autocomplete-directions"
4717              >Code</a
4718            >
4719          </div>
4720        </div>
4721
4722        <div class="card">
4723          <h4 class="card-header">places-autocomplete-hotelsearch</h4>
4724          <div class="card-footer">
4725            <button
4726              class="button"
4727              onclick="setIframe('./samples/playground.html?sample=places-autocomplete-hotelsearch')"
4728            >
4729              Playground
4730            </button>
4731            <button
4732              class="button"
4733              onclick="setIframe('./samples/places-autocomplete-hotelsearch/iframe/index.html')"
4734            >
4735              Iframe
4736            </button>
4737            <button
4738              class="button"
4739              onclick="setIframe('./samples/places-autocomplete-hotelsearch/app/dist/index.html')"
4740            >
4741              App
4742            </button>
4743            <a
4744              class="button"
4745              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-autocomplete-hotelsearch"
4746              >Code</a
4747            >
4748          </div>
4749        </div>
4750
4751        <div class="card">
4752          <h4 class="card-header">places-autocomplete-multiple-countries</h4>
4753          <div class="card-footer">
4754            <button
4755              class="button"
4756              onclick="setIframe('./samples/playground.html?sample=places-autocomplete-multiple-countries')"
4757            >
4758              Playground
4759            </button>
4760            <button
4761              class="button"
4762              onclick="setIframe('./samples/places-autocomplete-multiple-countries/iframe/index.html')"
4763            >
4764              Iframe
4765            </button>
4766            <button
4767              class="button"
4768              onclick="setIframe('./samples/places-autocomplete-multiple-countries/app/dist/index.html')"
4769            >
4770              App
4771            </button>
4772            <a
4773              class="button"
4774              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-autocomplete-multiple-countries"
4775              >Code</a
4776            >
4777          </div>
4778        </div>
4779
4780        <div class="card">
4781          <h4 class="card-header">places-autocomplete-service</h4>
4782          <div class="card-footer">
4783            <button
4784              class="button"
4785              onclick="setIframe('./samples/playground.html?sample=places-autocomplete-service')"
4786            >
4787              Playground
4788            </button>
4789            <button
4790              class="button"
4791              onclick="setIframe('./samples/places-autocomplete-service/iframe/index.html')"
4792            >
4793              Iframe
4794            </button>
4795            <button
4796              class="button"
4797              onclick="setIframe('./samples/places-autocomplete-service/app/dist/index.html')"
4798            >
4799              App
4800            </button>
4801            <a
4802              class="button"
4803              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-autocomplete-service"
4804              >Code</a
4805            >
4806          </div>
4807        </div>
4808
4809        <div class="card">
4810          <h4 class="card-hea
4810der">places-placeid-finder</h4>
4811          <div class="card-footer">
4812            <button
4813              class="button"
4814              onclick="setIframe('./samples/playground.html?sample=places-placeid-finder')"
4815            >
4816              Playground
4817            </button>
4818            <button
4819              class="button"
4820              onclick="setIframe('./samples/places-placeid-finder/iframe/index.html')"
4821            >
4822              Iframe
4823            </button>
4824            <button
4825              class="button"
4826              onclick="setIframe('./samples/places-placeid-finder/app/dist/index.html')"
4827            >
4828              App
4829            </button>
4830            <a
4831              class="button"
4832              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-placeid-finder"
4833              >Code</a
4834            >
4835          </div>
4836        </div>
4837
4838        <div class="card">
4839          <h4 class="card-header">places-placeid-geocoder</h4>
4840          <div class="card-footer">
4841            <button
4842              class="button"
4843              onclick="setIframe('./samples/playground.html?sample=places-placeid-geocoder')"
4844            >
4845              Playground
4846            </button>
4847            <button
4848              class="button"
4849              onclick="setIframe('./samples/places-placeid-geocoder/iframe/index.html')"
4850            >
4851              Iframe
4852            </button>
4853            <button
4854              class="button"
4855              onclick="setIframe('./samples/places-placeid-geocoder/app/dist/index.html')"
4856            >
4857              App
4858            </button>
4859            <a
4860              class="button"
4861              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-placeid-geocoder"
4862              >Code</a
4863            >
4864          </div>
4865        </div>
4866
4867        <div class="card">
4868          <h4 class="card-header">places-queryprediction</h4>
4869          <div class="card-footer">
4870            <button
4871              class="button"
4872              onclick="setIframe('./samples/playground.html?sample=places-queryprediction')"
4873            >
4874              Playground
4875            </button>
4876            <button
4877              class="button"
4878              onclick="setIframe('./samples/places-queryprediction/iframe/index.html')"
4879            >
4880              Iframe
4881            </button>
4882            <button
4883              class="button"
4884              onclick="setIframe('./samples/places-queryprediction/app/dist/index.html')"
4885            >
4886              App
4887            </button>
4888            <a
4889              class="button"
4890              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-queryprediction"
4891              >Code</a
4892            >
4893          </div>
4894        </div>
4895
4896        <div class="card">
4897          <h4 class="card-header">places-searchbox</h4>
4898          <div class="card-footer">
4899            <button
4900              class="button"
4901              onclick="setIframe('./samples/playground.html?sample=places-searchbox')"
4902            >
4903              Playground
4904            </button>
4905            <button
4906              class="button"
4907              onclick="setIframe('./samples/places-searchbox/iframe/index.html')"
4908            >
4909              Iframe
4910            </button>
4911            <button
4912              class="button"
4913              onclick="setIframe('./samples/places-searchbox/app/dist/index.html')"
4914            >
4915              App
4916            </button>
4917            <a
4918              class="button"
4919              href="https://github.com/googlemaps/js-samples/tree/main/samples/places-searchbox"
4920              >Code</a
4921            >
4922          </div>
4923        </div>
4924
4925        <div class="card">
4926          <h4 class="card-header">poly-containsLocation</h4>
4927          <div class="card-footer">
4928            <button
4929              class="button"
4930              onclick="setIframe('./samples/playground.html?sample=poly-containsLocation')"
4931            >
4932              Playground
4933            </button>
4934            <button
4935              class="button"
4936              onclick="setIframe('./samples/poly-containsLocation/iframe/index.html')"
4937            >
4938              Iframe
4939            </button>
4940            <button
4941              class="button"
4942              onclick="setIframe('./samples/poly-containsLocation/app/dist/index.html')"
4943            >
4944              App
4945            </button>
4946            <a
4947              class="button"
4948              href="https://github.com/googlemaps/js-samples/tree/main/samples/poly-containsLocation"
4949              >Code</a
4950            >
4951          </div>
4952        </div>
4953
4954        <div class="card">
4955          <h4 class="card-header">polygon-arrays</h4>
4956          <div class="card-footer">
4957            <button
4958              class="button"
4959              onclick="setIframe('./samples/playground.html?sample=polygon-arrays')"
4960            >
4961              Playground
4962            </button>
4963            <button
4964              class="button"
4965              onclick="setIframe('./samples/polygon-arrays/iframe/index.html')"
4966            >
4967              Iframe
4968            </button>
4969            <button
4970              class="button"
4971              onclick="setIframe('./samples/polygon-arrays/app/dist/index.html')"
4972            >
4973              App
4974            </button>
4975            <a
4976              class="button"
4977              href="https://github.com/googlemaps/js-samples/tree/main/samples/polygon-arrays"
4978              >Code</a
4979            >
4980          </div>
4981        </div>
4982
4983        <div class="card">
4984          <h4 class="card-header">polygon-autoclose</h4>
4985          <div class="card-footer">
4986            <button
4987              class="button"
4988              onclick="setIframe('./samples/playground.html?sample=polygon-autoclose')"
4989            >
4990              Playground
4991            </button>
4992            <button
4993              class="button"
4994              onclick="setIframe('./samples/polygon-autoclose/iframe/index.html')"
4995            >
4996              Iframe
4997            </button>
4998            <button
4999              class="button"
5000              onclick="setIframe('./samples/polygon-autoclose/app/dist/index.html')"
5001            >
5002              App
5003            </button>
5004            <a
5005              class="button"
5006              href="https://github.com/googlemaps/js-samples/tree/main/samples/polygon-autoclose"
5007              >Code</a
5008            >
5009          </div>
5010        </div>
5011
5012        <div class="card">
5013          <h4 class="card-header">polygon-draggable</h4>
5014          <div class="card-footer">
5015            <button
5016              class="button"
5017              onclick="setIframe('./samples/playground.html?sample=polygon-draggable')"
5018            >
5019              Playground
5020            </button>
5021            <button
5022              class="button"
5023              onclick="setIframe('./samples/polygon-draggable/iframe/index.html')"
5024            >
5025              Iframe
5026            </button>
5027            <button
5028              class="button"
5029              onclick="setIframe('./samples/polygon-draggable/app/dist/index.html')"
5030            >
5031              App
5032            </button>
5033            <a
5034              class="button"
5035              href="https://github.com/googlemaps/js-samples/tree/main/samples/polygon-draggable"
5036              >Code</a
5037            >
5038          </div>
5039        </div>
5040
5041        <div class="card">
5042          <h4 class="card-header">polygon-hole</h4>
5043          <div class="card-footer">
5044            <button
5045              class="button"
5046              onclick="setIframe('./samples/playground.html?sample=polygon-hole')"
5047            >
5048              Playground
5049            </button>
5050            <button
5051              class="button"
5052              onclick="setIframe('./samples/polygon-hole/iframe/index.html')"
5053            >
5054              Iframe
5055            </button>
5056            <button
5057              class="button"
5058              onclick="setIframe('./samples/polygon-hole/app/dist/index.html')"
5059            >
5060              App
5061            </button>
5062            <a
5063              class="button"
5064              href="https://github.com/googlemaps/js-samples/tree/main/samples/polygon-hole"
5065              >Code</a
5066            >
5067          </div>
5068        </div>
5069
5070        <div class="card">
5071          <h4 class="card-header">polygon-simple</h4>
5072          <div class="card-footer">
5073            <button
5074              class="button"
5075              onclick="setIframe('./samples/playground.html?sample=polygon-simple')"
5076            >
5077              Playground
5078            </button>
5079            <button
5080              class="button"
5081              onclick="setIframe('./samples/polygon-simple/iframe/index.html')"
5082            >
5083              Iframe
5084            </button>
5085            <button
5086              class="button"
5087              onclick="setIframe('./samples/polygon-simple/app/dist/index.html')"
5088            >
5089              App
5090            </button>
5091            <a
5092              class="button"
5093              href="https://github.com/googlemaps/js-samples/tree/main/samples/polygon-simple"
5094              >Code</a
5095            >
5096          </div>
5097        </div>
5098
5099        <div class="card">
5100          <h4 class="card-header">polyline-complex</h4>
5101          <div class="card-footer">
5102            <button
5103              class="button"
5104              onclick="setIframe('./samples/playground.html?sample=polyline-complex')"
5105            >
5106              Playground
5107            </button>
5108            <button
5109              class="button"
5110              onclick="setIframe('./samples/polyline-complex/iframe/index.html')"
5111            >
5112              Iframe
5113            </button>
5114            <button
5115              class="button"
5116              onclick="setIframe('./samples/polyline-complex/app/dist/index.html')"
5117            >
5118              App
5119            </button>
5120            <a
5121              class="button"
5122              href="https://github.com/googlemaps/js-samples/tree/main/samples/polyline-complex"
5123              >Code</a
5124            >
5125          </div>
5126        </div>
5127
5128        <div class="card">
5129          <h4 class="card-header">polyline-remove</h4>
5130          <div class="card-footer">
5131            <button
5132              class="button"
5133              onclick="setIframe('./samples/playground.html?sample=polyline-remove')"
5134            >
5135              Playground
5136            </button>
5137            <button
5138              class="button"
5139              onclick="setIframe('./samples/polyline-remove/iframe/index.html')"
5140            >
5141              Iframe
5142            </button>
5143            <button
5144              class="button"
5145              onclick="setIframe('./samples/polyline-remove/app/dist/index.html')"
5146            >
5147              App
5148            </button>
5149            <a
5150              class="button"
5151              href="https://github.com/googlemaps/js-samples/tree/main/samples/polyline-remove"
5152              >Code</a
5153            >
5154          </div>
5155        </div>
5156
5157        <div class="card">
5158          <h4 class="card-header">polyline-simple</h4>
5159          <div class="card-footer">
5160            <button
5161              class="button"
5162              onclick="setIframe('./samples/playground.html?sample=polyline-simple')"
5163            >
5164              Playground
5165            </button>
5166            <button
5167              class="button"
5168              onclick="setIframe('./samples/polyline-simple/iframe/index.html')"
5169            >
5170              Iframe
5171            </button>
5172            <button
5173              class="button"
5174              onclick="setIframe('./samples/polyline-simple/app/dist/index.html')"
5175            >
5176              App
5177            </button>
5178            <a
5179              class="button"
5180              href="https://github.com/googlemaps/js-samples/tree/main/samples/polyline-simple"
5181              >Code</a
5182            >
5183          </div>
5184        </div>
5185
5186        <div class="card">
5187          <h4 class="card-header">programmatic-load</h4>
5188          <div class="card-footer">
5189            <button
5190              class="button"
5191              onclick="setIframe('./samples/playground.html?sample=programmatic-load')"
5192            >
5193              Playground
5194            </button>
5195            <button
5196              class="button"
5197              onclick="setIframe('./samples/programmatic-load/iframe/index.html')"
5198            >
5199              Iframe
5200            </button>
5201            <button
5202              class="button"
5203              onclick="setIframe('./samples/programmatic-load/app/dist/index.html')"
5204            >
5205              App
5206            </button>
5207            <a
5208              class="button"
5209              href="https://github.com/googlemaps/js-samples/tree/main/samples/programmatic-load"
5210              >Code</a
5211            >
5212          </div>
5213        </div>
5214
5215        <div class="card">
5216          <h4 class="card-header">programmatic-load-button</h4>
5217          <div class="card-footer">
5218            <button
5219              class="button"
5220              onclick="setIframe('./samples/playground.html?sample=programmatic-load-button')"
5221            >
5222              Playground
5223            </button>
5224            <button
5225              class="button"
5226              onclick="setIframe('./samples/programmatic-load-button/iframe/index.html')"
5227            >
5228              Iframe
5229            </button>
5230            <button
5231              class="button"
5232              onclick="setIframe('./samples/programmatic-load-button/app/dist/index.html')"
5233            >
5234              App
5235            </button>
5236            <a
5237              class="button"
5238              href="https://github.com/googlemaps/js-samples/tree/main/samples/programmatic-load-button"
5239              >Code</a
5240            >
5241          </div>
5242        </div>
5243
5244        <div class="card">
5245          <h4 class="card-header">react-map</h4>
5246          <div class="card-footer">
5247            <button
5248              class="button"
5249              onclick="setIframe('./samples/playground.html?sample=react-map')"
5250            >
5251              Playground
5252            </button>
5253            <button
5254              class="button"
5255              onclick="setIframe('./samples/react-map/iframe/index.html')"
5256            >
5257              Iframe
5258            </button>
5259            <button
5260              class="button"
5261              onclick="setIframe('./samples/react-map/app/dist/index.html')"
5262            >
5263              App
5264            </button>
5265            <a
5266              class="button"
5267              href="https://github.com/googlemaps/js-samples/tree/main/samples/react-map"
5268              >Code</a
5269            >
5270          </div>
5271        </div>
5272
5273        <div class="card">
5274          <h4 class="card-header">rectangle-event</h4>
5275          <div class="card-footer">
5276            <button
5277              class="button"
5278              onclick="setIframe('./samples/playground.html?sample=rectangle-event')"
5279            >
5280              Playground
5281            </button>
5282            <button
5283              class="button"
5284              onclick="setIframe('./samples/rectangle-event/iframe/index.html')"
5285            >
5286              Iframe
5287            </button>
5288            <button
5289              class="button"
5290              onclick="setIframe('./samples/rectangle-event/app/dist/index.html')"
5291            >
5292              App
5293            </button>
5294            <a
5295              class="button"
5296              href="https://github.com/googlemaps/js-samples/tree/main/samples/rectangle-event"
5297              >Code</a
5298            >
5299          </div>
5300        </div>
5301
5302        <div class="card">
5303          <h4 class="card-header">rectangle-simple</h4>
5304          <div class="card-footer">
5305            <button
5306              class="button"
5307              onclick="setIframe('./samples/playground.html?sample=rectangle-simple')"
5308            >
5309              Playground
5310            </button>
5311            <button
5312              class="button"
5313              onclick="setIframe('./samples/rectangle-simple/iframe/index.html')"
5314            >
5315              Iframe
5316            </button>
5317            <button
5318              class="button"
5319              onclick="setIframe('./samples/rectangle-simple/app/dist/index.html')"
5320            >
5321              App
5322            </button>
5323            <a
5324              class="button"
5325              href="https://github.com/googlemaps/js-samples/tree/main/samples/rectangle-simple"
5326              >Code</a
5327            >
5328          </div>
5329        </div>
5330
5331        <div class="card">
5332          <h4 class="card-header">rectangle-zoom</h4>
5333          <div class="card-footer">
5334       
5334     <button
5335              class="button"
5336              onclick="setIframe('./samples/playground.html?sample=rectangle-zoom')"
5337            >
5338              Playground
5339            </button>
5340            <button
5341              class="button"
5342              onclick="setIframe('./samples/rectangle-zoom/iframe/index.html')"
5343            >
5344              Iframe
5345            </button>
5346            <button
5347              class="button"
5348              onclick="setIframe('./samples/rectangle-zoom/app/dist/index.html')"
5349            >
5350              App
5351            </button>
5352            <a
5353              class="button"
5354              href="https://github.com/googlemaps/js-samples/tree/main/samples/rectangle-zoom"
5355              >Code</a
5356            >
5357          </div>
5358        </div>
5359
5360        <div class="card">
5361          <h4 class="card-header">rgm-autocomplete</h4>
5362          <div class="card-footer">
5363            <button
5364              class="button"
5365              onclick="setIframe('./samples/playground.html?sample=rgm-autocomplete')"
5366            >
5367              Playground
5368            </button>
5369            <button
5370              class="button"
5371              onclick="setIframe('./samples/rgm-autocomplete/iframe/index.html')"
5372            >
5373              Iframe
5374            </button>
5375            <button
5376              class="button"
5377              onclick="setIframe('./samples/rgm-autocomplete/app/dist/index.html')"
5378            >
5379              App
5380            </button>
5381            <a
5382              class="button"
5383              href="https://github.com/googlemaps/js-samples/tree/main/samples/rgm-autocomplete"
5384              >Code</a
5385            >
5386          </div>
5387        </div>
5388
5389        <div class="card">
5390          <h4 class="card-header">rgm-basic-map</h4>
5391          <div class="card-footer">
5392            <button
5393              class="button"
5394              onclick="setIframe('./samples/playground.html?sample=rgm-basic-map')"
5395            >
5396              Playground
5397            </button>
5398            <button
5399              class="button"
5400              onclick="setIframe('./samples/rgm-basic-map/iframe/index.html')"
5401            >
5402              Iframe
5403            </button>
5404            <button
5405              class="button"
5406              onclick="setIframe('./samples/rgm-basic-map/app/dist/index.html')"
5407            >
5408              App
5409            </button>
5410            <a
5411              class="button"
5412              href="https://github.com/googlemaps/js-samples/tree/main/samples/rgm-basic-map"
5413              >Code</a
5414            >
5415          </div>
5416        </div>
5417
5418        <div class="card">
5419          <h4 class="card-header">rgm-college-picker</h4>
5420          <div class="card-footer">
5421            <button
5422              class="button"
5423              onclick="setIframe('./samples/playground.html?sample=rgm-college-picker')"
5424            >
5425              Playground
5426            </button>
5427            <button
5428              class="button"
5429              onclick="setIframe('./samples/rgm-college-picker/iframe/index.html')"
5430            >
5431              Iframe
5432            </button>
5433            <button
5434              class="button"
5435              onclick="setIframe('./samples/rgm-college-picker/app/dist/index.html')"
5436            >
5437              App
5438            </button>
5439            <a
5440              class="button"
5441              href="https://github.com/googlemaps/js-samples/tree/main/samples/rgm-college-picker"
5442              >Code</a
5443            >
5444          </div>
5445        </div>
5446
5447        <div class="card">
5448          <h4 class="card-header">split-map-panes</h4>
5449          <div class="card-footer">
5450            <button
5451              class="button"
5452              onclick="setIframe('./samples/playground.html?sample=split-map-panes')"
5453            >
5454              Playground
5455            </button>
5456            <button
5457              class="button"
5458              onclick="setIframe('./samples/split-map-panes/iframe/index.html')"
5459            >
5460              Iframe
5461            </button>
5462            <button
5463              class="button"
5464              onclick="setIframe('./samples/split-map-panes/app/dist/index.html')"
5465            >
5466              App
5467            </button>
5468            <a
5469              class="button"
5470              href="https://github.com/googlemaps/js-samples/tree/main/samples/split-map-panes"
5471              >Code</a
5472            >
5473          </div>
5474        </div>
5475
5476        <div class="card">
5477          <h4 class="card-header">store-locator</h4>
5478          <div class="card-footer">
5479            <button
5480              class="button"
5481              onclick="setIframe('./samples/playground.html?sample=store-locator')"
5482            >
5483              Playground
5484            </button>
5485            <button
5486              class="button"
5487              onclick="setIframe('./samples/store-locator/iframe/index.html')"
5488            >
5489              Iframe
5490            </button>
5491            <button
5492              class="button"
5493              onclick="setIframe('./samples/store-locator/app/dist/index.html')"
5494            >
5495              App
5496            </button>
5497            <a
5498              class="button"
5499              href="https://github.com/googlemaps/js-samples/tree/main/samples/store-locator"
5500              >Code</a
5501            >
5502          </div>
5503        </div>
5504
5505        <div class="card">
5506          <h4 class="card-header">streetview-controls</h4>
5507          <div class="card-footer">
5508            <button
5509              class="button"
5510              onclick="setIframe('./samples/playground.html?sample=streetview-controls')"
5511            >
5512              Playground
5513            </button>
5514            <button
5515              class="button"
5516              onclick="setIframe('./samples/streetview-controls/iframe/index.html')"
5517            >
5518              Iframe
5519            </button>
5520            <button
5521              class="button"
5522              onclick="setIframe('./samples/streetview-controls/app/dist/index.html')"
5523            >
5524              App
5525            </button>
5526            <a
5527              class="button"
5528              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-controls"
5529              >Code</a
5530            >
5531          </div>
5532        </div>
5533
5534        <div class="card">
5535          <h4 class="card-header">streetview-custom-simple</h4>
5536          <div class="card-footer">
5537            <button
5538              class="button"
5539              onclick="setIframe('./samples/playground.html?sample=streetview-custom-simple')"
5540            >
5541              Playground
5542            </button>
5543            <button
5544              class="button"
5545              onclick="setIframe('./samples/streetview-custom-simple/iframe/index.html')"
5546            >
5547              Iframe
5548            </button>
5549            <button
5550              class="button"
5551              onclick="setIframe('./samples/streetview-custom-simple/app/dist/index.html')"
5552            >
5553              App
5554            </button>
5555            <a
5556              class="button"
5557              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-custom-simple"
5558              >Code</a
5559            >
5560          </div>
5561        </div>
5562
5563        <div class="card">
5564          <h4 class="card-header">streetview-custom-tiles</h4>
5565          <div class="card-footer">
5566            <button
5567              class="button"
5568              onclick="setIframe('./samples/playground.html?sample=streetview-custom-tiles')"
5569            >
5570              Playground
5571            </button>
5572            <button
5573              class="button"
5574              onclick="setIframe('./samples/streetview-custom-tiles/iframe/index.html')"
5575            >
5576              Iframe
5577            </button>
5578            <button
5579              class="button"
5580              onclick="setIframe('./samples/streetview-custom-tiles/app/dist/index.html')"
5581            >
5582              App
5583            </button>
5584            <a
5585              class="button"
5586              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-custom-tiles"
5587              >Code</a
5588            >
5589          </div>
5590        </div>
5591
5592        <div class="card">
5593          <h4 class="card-header">streetview-embed</h4>
5594          <div class="card-footer">
5595            <button
5596              class="button"
5597              onclick="setIframe('./samples/playground.html?sample=streetview-embed')"
5598            >
5599              Playground
5600            </button>
5601            <button
5602              class="button"
5603              onclick="setIframe('./samples/streetview-embed/iframe/index.html')"
5604            >
5605              Iframe
5606            </button>
5607            <button
5608              class="button"
5609              onclick="setIframe('./samples/streetview-embed/app/dist/index.html')"
5610            >
5611              App
5612            </button>
5613            <a
5614              class="button"
5615              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-embed"
5616              >Code</a
5617            >
5618          </div>
5619        </div>
5620
5621        <div class="card">
5622          <h4 class="card-header">streetview-events</h4>
5623          <div class="card-footer">
5624            <button
5625              class="button"
5626              onclick="setIframe('./samples/playground.html?sample=streetview-events')"
5627            >
5628              Playground
5629            </button>
5630            <button
5631              class="button"
5632              onclick="setIframe('./samples/streetview-events/iframe/index.html')"
5633            >
5634              Iframe
5635            </button>
5636            <button
5637              class="button"
5638              onclick="setIframe('./samples/streetview-events/app/dist/index.html')"
5639            >
5640              App
5641            </button>
5642            <a
5643              class="button"
5644              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-events"
5645              >Code</a
5646            >
5647          </div>
5648        </div>
5649
5650        <div class="card">
5651          <h4 class="card-header">streetview-overlays</h4>
5652          <div class="card-footer">
5653            <button
5654              class="button"
5655              onclick="setIframe('./samples/playground.html?sample=streetview-overlays')"
5656            >
5657              Playground
5658            </button>
5659            <button
5660              class="button"
5661              onclick="setIframe('./samples/streetview-overlays/iframe/index.html')"
5662            >
5663              Iframe
5664            </button>
5665            <button
5666              class="button"
5667              onclick="setIframe('./samples/streetview-overlays/app/dist/index.html')"
5668            >
5669              App
5670            </button>
5671            <a
5672              class="button"
5673              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-overlays"
5674              >Code</a
5675            >
5676          </div>
5677        </div>
5678
5679        <div class="card">
5680          <h4 class="card-header">streetview-service</h4>
5681          <div class="card-footer">
5682            <button
5683              class="button"
5684              onclick="setIframe('./samples/playground.html?sample=streetview-service')"
5685            >
5686              Playground
5687            </button>
5688            <button
5689              class="button"
5690              onclick="setIframe('./samples/streetview-service/iframe/index.html')"
5691            >
5692              Iframe
5693            </button>
5694            <button
5695              class="button"
5696              onclick="setIframe('./samples/streetview-service/app/dist/index.html')"
5697            >
5698              App
5699            </button>
5700            <a
5701              class="button"
5702              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-service"
5703              >Code</a
5704            >
5705          </div>
5706        </div>
5707
5708        <div class="card">
5709          <h4 class="card-header">streetview-simple</h4>
5710          <div class="card-footer">
5711            <button
5712              class="button"
5713              onclick="setIframe('./samples/playground.html?sample=streetview-simple')"
5714            >
5715              Playground
5716            </button>
5717            <button
5718              class="button"
5719              onclick="setIframe('./samples/streetview-simple/iframe/index.html')"
5720            >
5721              Iframe
5722            </button>
5723            <button
5724              class="button"
5725              onclick="setIframe('./samples/streetview-simple/app/dist/index.html')"
5726            >
5727              App
5728            </button>
5729            <a
5730              class="button"
5731              href="https://github.com/googlemaps/js-samples/tree/main/samples/streetview-simple"
5732              >Code</a
5733            >
5734          </div>
5735        </div>
5736
5737        <div class="card">
5738          <h4 class="card-header">style-array</h4>
5739          <div class="card-footer">
5740            <button
5741              class="button"
5742              onclick="setIframe('./samples/playground.html?sample=style-array')"
5743            >
5744              Playground
5745            </button>
5746            <button
5747              class="button"
5748              onclick="setIframe('./samples/style-array/iframe/index.html')"
5749            >
5750              Iframe
5751            </button>
5752            <button
5753              class="button"
5754              onclick="setIframe('./samples/style-array/app/dist/index.html')"
5755            >
5756              App
5757            </button>
5758            <a
5759              class="button"
5760              href="https://github.com/googlemaps/js-samples/tree/main/samples/style-array"
5761              >Code</a
5762            >
5763          </div>
5764        </div>
5765
5766        <div class="card">
5767          <h4 class="card-header">style-selector</h4>
5768          <div class="card-footer">
5769            <button
5770              class="button"
5771              onclick="setIframe('./samples/playground.html?sample=style-selector')"
5772            >
5773              Playground
5774            </button>
5775            <button
5776              class="button"
5777              onclick="setIframe('./samples/style-selector/iframe/index.html')"
5778            >
5779              Iframe
5780            </button>
5781            <button
5782              class="button"
5783              onclick="setIframe('./samples/style-selector/app/dist/index.html')"
5784            >
5785              App
5786            </button>
5787            <a
5788              class="button"
5789              href="https://github.com/googlemaps/js-samples/tree/main/samples/style-selector"
5790              >Code</a
5791            >
5792          </div>
5793        </div>
5794
5795        <div class="card">
5796          <h4 class="card-header">threejs-overlay-simple</h4>
5797          <div class="card-footer">
5798            <button
5799              class="button"
5800              onclick="setIframe('./samples/playground.html?sample=threejs-overlay-simple')"
5801            >
5802              Playground
5803            </button>
5804            <button
5805              class="button"
5806              onclick="setIframe('./samples/threejs-overlay-simple/iframe/index.html')"
5807            >
5808              Iframe
5809            </button>
5810            <button
5811              class="button"
5812              onclick="setIframe('./samples/threejs-overlay-simple/app/dist/index.html')"
5813            >
5814              App
5815            </button>
5816            <a
5817              class="button"
5818              href="https://github.com/googlemaps/js-samples/tree/main/samples/threejs-overlay-simple"
5819              >Code</a
5820            >
5821          </div>
5822        </div>
5823
5824        <div class="card">
5825          <h4 class="card-header">user-editable-shapes</h4>
5826          <div class="card-footer">
5827            <button
5828              class="button"
5829              onclick="setIframe('./samples/playground.html?sample=user-editable-shapes')"
5830            >
5831              Playground
5832            </button>
5833            <button
5834              class="button"
5835              onclick="setIframe('./samples/user-editable-shapes/iframe/index.html')"
5836            >
5837              Iframe
5838            </button>
5839            <button
5840              class="button"
5841              onclick="setIframe('./samples/user-editable-shapes/app/dist/index.html')"
5842            >
5843              App
5844            </button>
5845            <a
5846              class="button"
5847              href="https://github.com/googlemaps/js-samples/tree/main/samples/user-editable-shapes"
5848              >Code</a
5849            >
5850          </div>
5851        </div>
5852
5853        <div class="card">
5854          <h4 class="card-header">vector-detector</h4>
5855          <div class="card-footer">
5856            <button
5857              class="button"
5858              onclick="setIframe('./samples/playground.html?sample=vector-detector')"
5859            >
5860              Playground
5861            </button>
5862            <button
5863              class="button"
5864              onclick="setIframe('./samples/vector-detector/iframe/index.html')"
5865            >
5866              Iframe
5867            </button>
5868            <button
5869              class="button"
5870              onclick="setIframe('./samples/vector-detector/app/dist/index.html')"
5871            >
5872              App
5873            </button>
5874            <a
5875              class="button"
5876              href="https://github.com/googlemaps/js-samples/tree/main/samples/vector-detector"
5877              >Code</a
5878            >
5879          </div>
5880        </div>
5881
5882        <div class="card">
5883          <h4 class="card-header">web-components-accessibility</h4>
5884          <div class="card-footer">
5885            <button
5886              class="button"
5887              onclick="setIframe('./samples/playground.html?sample=web-components-accessibility')"
5888            >
5889              Playground
5890            </button>
5891            <button
5892              class="button"
5893              onclick="setIframe('./samples/web-components-accessibility/iframe/index.html')"
5894            >
5895              Iframe
5896            </button>
5897            <button
5898              class="button"
5899              onclick="setIframe('./samples/web-components-accessibility/app/dist/index.html')"
5900            >
5901              App
5902            </button>
5903            <a
5904              class="button"
5905              href="https://github.com/googlemaps/js-samples/tree/main/samples/web-components-accessibility"
5906              >Code</a
5907            >
5908          </div>
5909        </div>
5910
5911        <div class="card">
5912          <h4 class="card-header">web-components-events</h4>
5913          <div class="card-footer">
5914            <button
5915              class="button"
5916              onclick="setIframe('./samples/playground.html?sample=web-components-events')"
5917            >
5918              Playground
5919            </button>
5920            <button
5921              class="button"
5922              onclick="setIframe('./samples/web-components-events/iframe/index.html')"
5923            >
5924              Iframe
5925            </button>
5926            <button
5927              class="button"
5928              onclick="setIframe('./samples/web-components-events/app/dist/index.html')"
5929            >
5930              App
5931            </button>
5932            <a
5933              class="button"
5934              href="https://github.com/googlemaps/js-samples/tree/main/samples/web-components-events"
5935              >Code</a
5936            >
5937          </div>
5938        </div>
5939
5940        <div class="card">
5941          <h4 class="card-header">web-components-map</h4>
5942          <div class="card-footer">
5943            <button
5944              class="button"
5945              onclick="setIframe('./samples/playground.html?sample=web-components-map')"
5946            >
5947              Playground
5948            </button>
5949            <button
5950              class="button"
5951              onclick="setIframe('./samples/web-components-map/iframe/index.html')"
5952            >
5953              Iframe
5954            </button>
5955            <button
5956              class="button"
5957              onclick="setIframe('./samples/web-components-map/app/dist/index.html')"
5958            >
5959              App
5960            </button>
5961            <a
5962              class="button"
5963              href="https://github.com/googlemaps/js-samples/tree/main/samples/web-components-map"
5964              >Code</a
5965            >
5966          </div>
5967        </div>
5968
5969        <div class="card">
5970          <h4 class="card-header">web-components-markers</h4>
5971          <div class="card-footer">
5972            <button
5973              class="button"
5974              onclick="setIframe('./samples/playground.html?sample=web-components-markers')"
5975            >
5976              Playground
5977            </button>
5978            <button
5979              class="button"
5980              onclick="setIframe('./samples/web-components-markers/iframe/index.html')"
5981            >
5982              Iframe
5983            </button>
5984            <button
5985              class="button"
5986              onclick="setIframe('./samples/web-components-markers/app/dist/index.html')"
5987            >
5988              App
5989            </button>
5990            <a
5991              class="button"
5992              href="https://github.com/googlemaps/js-samples/tree/main/samples/web-components-markers"
5993              >Code</a
5994            >
5995          </div>
5996        </div>
5997
5998        <div class="card">
5999          <h4 class="card-header">webgl-deckgl</h4>
6000          <div class="card-footer">
6001            <button
6002              class="button"
6003              onclick="setIframe('./samples/playground.html?sample=webgl-deckgl')"
6004            >
6005              Playground
6006            </button>
6007            <button
6008              class="button"
6009              onclick="setIframe('./samples/webgl-deckgl/iframe/index.html')"
6010            >
6011              Iframe
6012            </button>
6013            <button
6014              class="button"
6015              onclick="setIframe('./samples/webgl-deckgl/app/dist/index.html')"
6016            >
6017              App
6018            </button>
6019            <a
6020              class="button"
6021              href="https://github.com/googlemaps/js-samples/tree/main/samples/webgl-deckgl"
6022              >Code</a
6023            >
6024          </div>
6025        </div>
6026
6027        <div class="card">
6028          <h4 class="card-header">webgl-overlay-simple</h4>
6029          <div class="card-footer">
6030            <button
6031              class="button"
6032              onclick="setIframe('./samples/playground.html?sample=webgl-overlay-simple')"
6033            >
6034              Playground
6035            </button>
6036            <button
6037              class="button"
6038              onclick="setIframe('./samples/webgl-overlay-simple/iframe/index.html')"
6039            >
6040              Iframe
6041            </button>
6042            <button
6043              class="button"
6044              onclick="setIframe('./samples/webgl-overlay-simple/app/dist/index.html')"
6045            >
6046              App
6047            </button>
6048            <a
6049              class="button"
6050              href="https://github.com/googlemaps/js-samples/tree/main/samples/webgl-overlay-simple"
6051              >Code</a
6052            >
6053          </div>
6054        </div>
6055
6056        <div class="card">
6057          <h4 class="card-header">webgl-tilt-rotation</h4>
6058          <div class="card-footer">
6059            <button
6060              class="button"
6061              onclick="setIframe('./samples/playground.html?sample=webgl-tilt-rotation')"
6062            >
6063              Playground
6064            </button>
6065            <button
6066              class="button"
6067              onclick="setIframe('./samples/webgl-tilt-rotation/iframe/index.html')"
6068            >
6069              Iframe
6070            </button>
6071            <button
6072              class="button"
6073              onclick="setIframe('./samples/webgl-tilt-rotation/app/dist/index.html')"
6074            >
6075              App
6076            </button>
6077            <a
6078              class="button"
6079              href="https://github.com/googlemaps/js-samples/tree/main/samples/webgl-tilt-rotation"
6080              >Code</a
6081            >
6082          </div>
6083        </div>
6084      </div>
6085      <div
6086        style="display: flex; flex-direction: column; gap: 10px; flex-grow: 1"
6087      >
6088        <iframe
6089          id="iframe"
6090          src="./samples/playground.html?sample=map-simple"
6091          allow="geolocation"
6092        ></iframe>
6093        <p>
6094          Rendering
6095          <a id="path" href="./samples/playground.html?sample=map-simple"
6096            >./samples/playground.html?sample=map-simple</a
6097          >
6098        </p>
6099      </div>
6100    </div>
6101  </body>
6102</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.