fix: rgm sample work (#1704)

* testing gob * prime api key * adjusted map settings
googlemaps · May 1, 2024 · 850f386 · 850f386
1 parent 7ae7f68
commit 850f386
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/samples/rgm-basic-map/index.njk b/samples/rgm-basic-map/index.njk
@@ -1,24 +1,25 @@
+<!doctype html>
 <!--
-  Copyright 2019 Google LLC. All Rights Reserved. All Rights Reserved.
-
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
 -->
-{% extends '../../src/_includes/layout.njk'%}
-{% block html %}
+<html>
+  <head>
+    <title>React Google Maps - Basic Map</title>
+      <script>
+        const process = {env: {}}
+        process.env.GOOGLE_MAPS_API_KEY = "{{GOOGLE_MAPS_API_KEY}}";
+      </script>
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.tsx"></script>
+  </head>
+  <body>
     <div id="app"></div>
     <script type="module">
-      import {renderToDom} from './index';
+      import { renderToDom } from "./index";
 
-      renderToDom(document.querySelector('#app'));
+      renderToDom(document.querySelector("#app"));
     </script>
-{% endblock %}
+  </body>
+</html>
diff --git a/samples/rgm-basic-map/index.tsx b/samples/rgm-basic-map/index.tsx
@@ -20,13 +20,14 @@ import {createRoot} from 'react-dom/client';
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
 
 const API_KEY =
-  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
+  globalThis.GOOGLE_MAPS_API_KEY ?? ("YOUR_API_KEY");
+  console.log('API_KEY',API_KEY);
 
 const App = () => (
   <APIProvider apiKey={API_KEY}>
     <Map
-      defaultZoom={3}
-      defaultCenter={{lat: 22.54992, lng: 0}}
+      defaultZoom={8}
+      defaultCenter={{ lat: -34.397, lng: 150.644 }}
       gestureHandling={'greedy'}
       disableDefaultUI={true}
     />