feat: add google maps js sdk
This commit is contained in:
parent
4794b66718
commit
8ec31a1344
9
package-lock.json
generated
9
package-lock.json
generated
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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
1
src/env.d.ts
vendored
|
|
@ -1 +1,2 @@
|
||||||
/// <reference types="astro/client" />
|
/// <reference types="astro/client" />
|
||||||
|
/// <reference types="@types/google.maps" />
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user