log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add google maps embed

Browse Source
This commit is contained in:
log101 2024-01-14 21:39:04 +03:00
parent 9c4573a691
commit e184e055c6
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/index.astro
View File

@ -11,6 +11,9 @@ import {
} from "@/components/ui/card" } from "@/components/ui/card"
import { CalendarIcon } from "@radix-ui/react-icons" import { CalendarIcon } 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>
@ -29,8 +32,22 @@ import { CalendarIcon } from "@radix-ui/react-icons"
</Card> </Card>
<Button className='w-full bg-indigo-500'>Haritayı Gizle</Button> <Button className='w-full bg-indigo-500'>Haritayı Gizle</Button>
<div class="w-full h-[200px] bg-gray-400 rounded"></div>
<iframe height="450" style="border:0" loading="lazy" allowfullscreen src={mapSrc}></iframe>
<div class="w-full h-[200px] bg-gray-600 rounded"></div> <div class="w-full h-[200px] bg-gray-600 rounded"></div>
<Button className='w-full'>Paylaş</Button> <Button className='w-full'>Paylaş</Button>
</main> </main>
</Layout> </Layout>
<style>
gmp-map {
height: 100%;
}
html,
body {
margin: 0;
padding: 0;
}
</style>