Svelte Maps
Our Svelte Map component uses the Google Maps API and it comes with
a custom interface that matches the theme’s colours.
Keep reading our Svelte Maps examples and learn how to use this
plugin.
Get your API key
In order to get your Google Maps API key navigate to the following page: Google Maps
Initialization
First make sure to add your maps api key in the
API_KEY
file
<script>
import { API_KEY } from "./API_KEY";
import GoogleMapsLoader from "google-maps";
export let name = "Google map";
GoogleMapsLoader.KEY = API_KEY;
onMount(async () => {
let map,
lat = 40.748817,
lng = -73.985428,
color = "#5e72e4";
map = document.getElementById("map-custom");
let myLatlng = new google.maps.LatLng(lat, lng);
let mapOptions = {
zoom: 12,
scrollwheel: false,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [{ color: "#444444" }]
},
{
featureType: "landscape",
elementType: "all",
stylers: [{ color: "#f2f2f2" }]
},
{
featureType: "poi",
elementType: "all",
stylers: [{ visibility: "off" }]
},
{
featureType: "road",
elementType: "all",
stylers: [{ saturation: -100 }, { lightness: 45 }]
},
{
featureType: "road.highway",
elementType: "all",
stylers: [{ visibility: "simplified" }]
},
{
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [{ visibility: "off" }]
},
{
featureType: "transit",
elementType: "all",
stylers: [{ visibility: "off" }]
},
{
featureType: "water",
elementType: "all",
stylers: [{ color: color }, { visibility: "on" }]
},
{
height: "600px"
}
]
};
map = new google.maps.Map(map, mapOptions);
let marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP,
title: "Hello World!"
});
let contentString =
'<div class="info-window-content"><h2>Argon Dashboard PRO</h2>' +
"<p>A beautiful premium dashboard for Bootstrap 4.</p></div>";
let infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
</script>
Example
<Card noBody={true} className="border-0">
<div id="map-default" class="map-canvas" />
</Card>
Custom map Pro
<Card noBody={true} className="border-0">
<div id="map-custom" class="map-canvas" />
</Card>