Skip to content

Commit 2f7527f

Browse files
usefulthinkusefulthink
committed
add simple ECL compatibility example
1 parent e74d8fc commit 2f7527f

File tree

6 files changed

+166
-0
lines changed

6 files changed

+166
-0
lines changed

‎examples/ecl-compat/README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Basic Google Maps Setup Example
2+
3+
![image](https://user-images.githubusercontent.com/39244966/208682692-d5b23518-9e51-4a87-8121-29f71e41c777.png)
4+
5+
This is an example to show how to setup a simple Google Maps Map with the `<Map/>` component of the Google Maps React
6+
library.
7+
8+
## Google Maps API key
9+
10+
This example does not come with an API key. Running the examples locally requires a valid API key for the Google Maps Platform.
11+
See [the official documentation][get-api-key] on how to create and configure your own key.
12+
13+
The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a
14+
file named `.env` in the example directory with the following content:
15+
16+
```shell title=".env"
17+
GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
18+
```
19+
20+
If you are on the CodeSandbox playground you can also choose to [provide the API key like this](https://codesandbox.io/docs/learn/environment/secrets)
21+
22+
## Development
23+
24+
Go into the example-directory and run
25+
26+
```shell
27+
npm install
28+
```
29+
30+
To start the example with the local library run
31+
32+
```shell
33+
npm run start-local
34+
```
35+
36+
The regular `npm start` task is only used for the standalone versions of the example (CodeSandbox for example)
37+
38+
[get-api-key]: https://developers.google.com/maps/documentation/javascript/get-api-key

‎examples/ecl-compat/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0, user-scalable=no" />
8+
<title>Example:</title>
9+
10+
<style>
11+
body {
12+
margin: 0;
13+
font-family: sans-serif;
14+
}
15+
#app {
16+
width: 100vw;
17+
height: 100vh;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<div id="app"></div>
23+
<script type="module">
24+
import '@vis.gl/react-google-maps/examples.css';
25+
import '@vis.gl/react-google-maps/examples.js';
26+
import {renderToDom} from './src/app';
27+
28+
renderToDom(document.querySelector('#app'));
29+
</script>
30+
</body>
31+
</html>

‎examples/ecl-compat/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"type": "module",
3+
"dependencies": {
4+
"@googlemaps/extended-component-library": "^0.6.9",
5+
"@vis.gl/react-google-maps": "latest",
6+
"react": "^18.2.0",
7+
"react-dom": "^18.2.0",
8+
"vite": "^5.0.4"
9+
},
10+
"scripts": {
11+
"start": "vite",
12+
"start-local": "vite --config ../vite.config.local.js",
13+
"build": "vite build"
14+
}
15+
}

‎examples/ecl-compat/src/app.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import {createRoot} from 'react-dom/client';
3+
import {APIProvider, Map} from '@vis.gl/react-google-maps';
4+
import {RouteOverview} from '@googlemaps/extended-component-library/react';
5+
import ControlPanel from './control-panel';
6+
7+
const API_KEY =
8+
globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
9+
10+
const App = () => (
11+
<APIProvider apiKey={API_KEY} version={'beta'}>
12+
<Map
13+
mapId={'49ae42fed52588c3'}
14+
defaultCenter={{lat: 53.55, lng: 10.05}}
15+
defaultZoom={10}
16+
gestureHandling={'greedy'}
17+
disableDefaultUI={true}>
18+
<RouteOverview
19+
originAddress={'Little Island, New York'}
20+
destinationAddress={'Times Square Plaza, New York'}
21+
travelMode={'walking'}
22+
noPin></RouteOverview>
23+
</Map>
24+
<ControlPanel />
25+
</APIProvider>
26+
);
27+
export default App;
28+
29+
export function renderToDom(container: HTMLElement) {
30+
const root = createRoot(container);
31+
32+
root.render(
33+
<React.StrictMode>
34+
<App />
35+
</React.StrictMode>
36+
);
37+
}

‎examples/ecl-compat/src/control-panel.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
3+
function ControlPanel() {
4+
return (
5+
<div className="control-panel">
6+
<h3>Example Template</h3>
7+
<p>
8+
Add a brief description of the example here and update the link below
9+
</p>
10+
11+
<div className="links">
12+
<a
13+
href="https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/_template"
14+
target="_new">
15+
Try on CodeSandbox ↗
16+
</a>
17+
18+
<a
19+
href="https://github.com/visgl/react-google-maps/tree/main/examples/_template"
20+
target="_new">
21+
View Code ↗
22+
</a>
23+
</div>
24+
</div>
25+
);
26+
}
27+
28+
export default React.memo(ControlPanel);

‎examples/ecl-compat/vite.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {defineConfig, loadEnv} from 'vite';
2+
3+
export default defineConfig(({mode}) => {
4+
const {GOOGLE_MAPS_API_KEY = ''} = loadEnv(mode, process.cwd(), '');
5+
6+
return {
7+
define: {
8+
'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
9+
},
10+
resolve: {
11+
alias: {
12+
'@vis.gl/react-google-maps/examples.js':
13+
'https://visgl.github.io/react-google-maps/scripts/examples.js'
14+
}
15+
}
16+
};
17+
});

0 commit comments

Comments
 (0)