feat: add google maps js sdk

This commit is contained in:
log101 2024-01-15 14:11:06 +03:00
parent 4794b66718
commit 8ec31a1344
5 changed files with 75 additions and 14 deletions

9
package-lock.json generated
View File

@ -25,6 +25,9 @@
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"typescript": "^5.3.3" "typescript": "^5.3.3"
},
"devDependencies": {
"@types/google.maps": "^3.54.10"
} }
}, },
"node_modules/@alloc/quick-lru": { "node_modules/@alloc/quick-lru": {
@ -1322,6 +1325,12 @@
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
}, },
"node_modules/@types/google.maps": {
"version": "3.54.10",
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.54.10.tgz",
"integrity": "sha512-N6gwM01mKhooXaw+IKbUH7wJcIJCn8U60VoaVvom5EiQjmfgevhQ+0+/r17beXW5j8ad2x+WPr0iyOUodCw4/w==",
"dev": true
},
"node_modules/@types/hast": { "node_modules/@types/hast": {
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz",

View File

@ -27,5 +27,8 @@
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"typescript": "^5.3.3" "typescript": "^5.3.3"
},
"devDependencies": {
"@types/google.maps": "^3.54.10"
} }
} }

1
src/env.d.ts vendored
View File

@ -1 +1,2 @@
/// <reference types="astro/client" /> /// <reference types="astro/client" />
/// <reference types="@types/google.maps" />

View File

@ -1,5 +1,5 @@
--- ---
const googleSdkKey = import.meta.env.MAPS_SDK_KEY;
--- ---
<!doctype html> <!doctype html>
@ -10,6 +10,50 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<script define:vars={{ apiKey: googleSdkKey }}>
((g) => {
var h,
a,
k,
p = 'The Google Maps JavaScript API',
c = 'google',
l = 'importLibrary',
q = '__ib__',
m = document,
b = window;
b = b[c] || (b[c] = {});
var d = b.maps || (b.maps = {}),
r = new Set(),
e = new URLSearchParams(),
u = () =>
h ||
(h = new Promise(async (f, n) => {
await (a = m.createElement('script'));
e.set('libraries', [...r] + '');
for (k in g)
e.set(
k.replace(/[A-Z]/g, (t) => '_' + t[0].toLowerCase()),
g[k]
);
e.set('callback', c + '.maps.' + q);
a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
d[q] = f;
a.onerror = () => (h = n(Error(p + ' could not load.')));
a.nonce = m.querySelector('script[nonce]')?.nonce || '';
m.head.append(a);
}));
d[l]
? console.warn(p + ' only loads once. Ignoring:', g)
: (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));
})({
language: 'tr',
region: 'TR',
key: apiKey,
v: 'beta',
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<title>Konulu Konum</title> <title>Konulu Konum</title>
</head> </head>
<body class="bg-purple-50 container"> <body class="bg-purple-50 container">

View File

@ -12,14 +12,11 @@ import {
import { CalendarIcon } from '@radix-ui/react-icons'; import { CalendarIcon } from '@radix-ui/react-icons';
import { LockClosedIcon } from '@radix-ui/react-icons'; import { LockClosedIcon } from '@radix-ui/react-icons';
const apiKey = import.meta.env.MAPS_SDK_KEY;
const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V25yhQRsA2NsrXtDp8&key=${apiKey}`;
--- ---
<Layout> <Layout>
<main class="flex flex-col gap-3 my-4 items-center"> <main class="flex flex-col gap-3 my-4 items-center">
<Card> <Card className="w-full">
<CardHeader> <CardHeader>
<CardTitle>Ayşe</CardTitle> <CardTitle>Ayşe</CardTitle>
</CardHeader> </CardHeader>
@ -35,15 +32,7 @@ const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V
</CardFooter> </CardFooter>
</Card> </Card>
<Button className="w-full bg-indigo-500">Haritayı Gizle</Button> <div id="map" class="w-full h-[450px]"></div>
<iframe
height="450"
style="border:0"
loading="lazy"
allowfullscreen
src={mapSrc}
class="w-full"></iframe>
<div class="module w-full h-[450px] p-4"> <div class="module w-full h-[450px] p-4">
<div <div
@ -64,6 +53,21 @@ const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V
</main> </main>
</Layout> </Layout>
<script>
let map: google.maps.Map;
async function initMap(): Promise<void> {
const { Map } = (await google.maps.importLibrary(
'maps'
)) as google.maps.MapsLibrary;
map = new Map(document.getElementById('map') as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
initMap();
</script>
<style> <style>
.module { .module {
display: grid; display: grid;