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.