feat: add GMapsPolyline and GMapsAnimatedPolyline (#1)

.env.dist

@@ -0,0 +1,4 @@
+# Fill in these values and rename this file to .env
+# Then you can run any example in the `examples/` folder with `cd examples/<name> && pnpm dev`
+API_KEY=
+MAP_ID=

.gitignore

@@ -13,3 +13,5 @@ node_modules
 # Build output
 dist
 
+# Env vars
+.env

examples/basic/tsconfig.json

@@ -4,6 +4,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vite/client"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

examples/basic/vite.config.ts

@@ -4,4 +4,6 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  envDir: "../..",
+  envPrefix: "GMAPS_",
 });

examples/marker-animated/src/App.tsx

@@ -5,8 +5,8 @@ import {
   GMapsAnimatedMarker,
 } from "@gmaps/reactjs";
 
-const apiKey = "YOUR API KEY";
-const mapID = "YOUR MAP ID";
+const apiKey = import.meta.env.GMAPS_API_KEY || "YOUR API KEY";
+const mapID = import.meta.env.GMAPS_MAP_ID || "YOUR MAP ID";
 
 const defaultLocation = {
   // New York

examples/marker-animated/tsconfig.json

@@ -4,6 +4,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vite/client"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

examples/marker-animated/vite.config.ts

@@ -4,4 +4,6 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  envDir: "../..",
+  envPrefix: "GMAPS_",
 });

examples/marker-methods/src/App.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { GMapsMarker, GMaps, useGMapsMarker } from "@gmaps/reactjs";
 
-const apiKey = "YOUR API KEY";
-const mapID = "YOUR MAP ID";
+const apiKey = import.meta.env.GMAPS_API_KEY || "YOUR API KEY";
+const mapID = import.meta.env.GMAPS_MAP_ID || "YOUR MAP ID";
 
 const defaultLocation = {
   // New York

examples/marker-methods/tsconfig.json

@@ -4,6 +4,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vite/client"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

examples/marker-methods/vite.config.ts

@@ -4,4 +4,6 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  envDir: "../..",
+  envPrefix: "GMAPS_",
 });

examples/marker/src/App.tsx

@@ -1,7 +1,7 @@
 import { GMapsMarker, GMaps } from "@gmaps/reactjs";
 
-const apiKey = "YOUR API KEY";
-const mapID = "YOUR MAP ID";
+const apiKey = import.meta.env.GMAPS_API_KEY || "YOUR API KEY";
+const mapID = import.meta.env.GMAPS_MAP_ID || "YOUR MAP ID";
 
 const defaultLocation = {
   // New York

examples/marker/tsconfig.json

@@ -4,6 +4,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vite/client"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",

examples/marker/vite.config.ts

@@ -4,4 +4,6 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  envDir: "../..",
+  envPrefix: "GMAPS_",
 });

examples/polyline-animated/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": "warn",
+  },
+};

examples/polyline-animated/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/polyline-animated/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/polyline-animated/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "basic",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@gmaps/reactjs": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.2"
+  }
+}