What is the proper way of using a google map on Astro? I dont use any UI Framework
#What is the proper way of using a google map on Astro? I dont use any UI Framework
coarse lake
noble ploverBOT
Hi @coarse lake. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To use a Google Map in Astro without a UI framework, you have a couple of options:
-
You can use the
astro-geo-mapintegration, which allows you to embed an interactive map in your webpage using Leaflet.js. This integration is available in the Astro Integrations Directory (https://astro.build/integrations/19/). However, note that this uses Leaflet.js, not Google Maps specifically. -
Alternatively, you can use a client-side script to load and initialize a Google Map. Here's how you can do this:
-
First, create an Astro component for your map:
---
// MyMap.astro
---
<div id="map" style="height: 400px; width: 100%;"></div>
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
window.initMap = initMap;
</script>
<script async defer src="<https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>>
- Then, use this component in your Astro page:
---
import MyMap from '../components/MyMap.astro';
---
<html>
<body>
<h1>My Google Map</h1>
<MyMap />
</body>
</html>
This approach uses Astro's client-side scripts (https://docs.astro.build/en/guides/client-side-scripts/#_top) feature to load and initialize the Google Maps JavaScript API. Remember to replace YOUR_API_KEY with your actual Google Maps API key.