Create a .env file:
<!-- Inside the <body> of index.astro --> <section> <h3>Find Us</h3> <iframe src="https://www.google.com/maps/embed?pb=!1m18..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" ></iframe> </section> <!-- Example: External script link for a reservation widget --> <script is:inline src="https://app.opentable.com/widget/reservation/loader.js"></script> The is:inline attribute in Astro prevents the framework from bundling/optimizing the script, which is exactly what you want for a third-party widget. Part 2: Making Your Astro Restaurant Page Public Once your page is built, you need to make it public (accessible via URL). Here is how you get that “public my restaurant” link. Option A: Deploy to Vercel (One-Click & Free) npm run build # Then install Vercel CLI or connect your GitHub repo to vercel.com Vercel will give you a public URL like: https://my-restaurant.vercel.app – that is your public link. Option B: Deploy to Netlify (Drag & Drop) Run npm run build . The output is in the dist/ folder. Drag that folder into Netlify’s web interface. You’ll get a public link: https://your-restaurant.netlify.app . Option C: Deploy to Cloudflare Pages or GitHub Pages All of these provide instant public .com or .app domains. astro public my restaurant script link
Go to Google Maps , search for your restaurant, click “Share” → “Embed a map” → Copy the iframe src link. Then, in your Astro component: Create a