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-animate": "^1.0.7",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/google.maps": "^3.54.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@alloc/quick-lru": {
|
||||
|
|
@ -1322,6 +1325,12 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
|
||||
"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": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz",
|
||||
|
|
|
|||
|
|
@ -27,5 +27,8 @@
|
|||
"tailwindcss": "^3.4.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"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="@types/google.maps" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
|
||||
const googleSdkKey = import.meta.env.MAPS_SDK_KEY;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
|
@ -10,6 +10,50 @@
|
|||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<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>
|
||||
</head>
|
||||
<body class="bg-purple-50 container">
|
||||
|
|
|
|||
|
|
@ -12,14 +12,11 @@ import {
|
|||
|
||||
import { CalendarIcon } 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>
|
||||
<main class="flex flex-col gap-3 my-4 items-center">
|
||||
<Card>
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Ayşe</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -35,15 +32,7 @@ const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V
|
|||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<Button className="w-full bg-indigo-500">Haritayı Gizle</Button>
|
||||
|
||||
<iframe
|
||||
height="450"
|
||||
style="border:0"
|
||||
loading="lazy"
|
||||
allowfullscreen
|
||||
src={mapSrc}
|
||||
class="w-full"></iframe>
|
||||
<div id="map" class="w-full h-[450px]"></div>
|
||||
|
||||
<div class="module w-full h-[450px] p-4">
|
||||
<div
|
||||
|
|
@ -64,6 +53,21 @@ const mapSrc = `https://www.google.com/maps/embed/v1/place?q=place_id:ChIJpSDn9V
|
|||
</main>
|
||||
</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>
|
||||
.module {
|
||||
display: grid;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user