Tailwind CSS Google Maps - Notus JS

Our Map component uses the Google Maps API and it comes with a custom interface that matches the theme’s colours. Keep reading our Maps examples and learn how to use this plugin.

Usage

In order to use this plugin on your page you will need to include the following script inside your *.html page, right before the end of the </body> tag: 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>

Get your API key

In order to get your Google Maps API key navigate to the following page: Google Maps. After you’ve got your api key, you will need to replace in the above script, the YOUR_API_KEY_HERE with that key.

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" href="../../assets/img/favicon.ico" />
    <link
      rel="apple-touch-icon"
      sizes="76x76"
      href="../../assets/img/apple-icon.png"
    />
    <link
      rel="stylesheet"
      href="../../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
    />
    <link rel="stylesheet" href="../../assets/styles/tailwind.css" />
    <title>Maps | Notus JS by Creative Tim</title>
  </head>
  <body class="text-blueGray-700 antialiased">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div
      id="map-canvas"
      class="relative w-full rounded h-600-px"
      data-lat="40.748817"
      data-lng="-73.985428"
    ></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script type="text/javascript">
      (function () {
        /* Map initialisation */
        let google = window.google;
        let map = document.getElementById("map-canvas");
        let lat = map.getAttribute("data-lat");
        let lng = map.getAttribute("data-lng");

        const myLatlng = new google.maps.LatLng(lat, lng);
        const 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: "#fbb6ce" }, { visibility: "on" }],
            },
          ],
        };

        map = new google.maps.Map(map, mapOptions);

        const marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          animation: google.maps.Animation.DROP,
          title: "Hello World!",
        });

        const contentString =
          '<div class="info-window-content"><h2>Notus JS</h2>' +
          "<p>A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</p></div>";

        const infowindow = new google.maps.InfoWindow({
          content: contentString,
        });

        google.maps.event.addListener(marker, "click", function () {
          infowindow.open(map, marker);
        });
      })();
    </script>
  </body>
</html>

Props

If you want to see more examples and properties please check the official Google Maps API Documentation.