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>