Create a map instance that child components like Marker, Info, and Overlay can be added to for rich, interactive maps.
center and zoom can be data-bound and the map context is used to connect child components together.
<Map :mapbind:centerzoom=11 />
<p>Center: {{center}}</p>
<script>
import{Context}from'svelte-google-maps';
importMapfrom'svelte-google-maps/Map.html';
exportdefault{
components:{Map},
data(){
return{
map:newContext('your-api-key'),
center:{ lat:37.540725, lng:-77.436048}
}
}
}
</script>
Marker
Traditional Google Maps marker, with options for title, label, and/or icon.
<Map :map :center :zoom>
<Marker :map :position />
<Marker :map :positiontitle="..." />
<Marker :map :positionlabel="A" />
<Marker :map :positionicon="..." />
</Map>
<script>
import{Context}from'svelte-google-maps';
importMapfrom'svelte-google-maps/Map.html';
importMarkerfrom'svelte-google-maps/Marker.html';
exportdefault{
components:{Map, Marker },
data(){
return{
map:newContext('your-api-key'),
center:{ lat:37.540725, lng:-77.436048},
zoom:11,
position:{ lat:37.540725, lng:-77.436048}
};
}
}
</script>
Info
Use Google Maps' built-in InfoWindow to show an info bubble with information.
The info bubble is shown when the component is added, so wrap it an {{#if}} to display it as-needed.
Display any content, overlaid on the map. position is used to place the top-left corner or the content.
Optionally, an offset can be passed to adjust the positioning.