JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/maplace-js/0.2.10/maplace.min.js"></script>
<div class="map" id="map"></div>

CSS

html,
body,
.map {
  height: 100%;
  width: 100%;
  /* background: #000; */
}

body {
  padding: 0;
  margin: 0;
}

JavaScript

var LocsA = [{
  lat: 45.9,
  lon: 10.9,
  title: 'Title A1',
  html: '<h3>Content A1</h3>',
  icon: 'http://maps.google.com/mapfiles/markerA.png', // custom icon
  animation: google.maps.Animation.DROP
}, {
  lat: 44.8,
  lon: 1.7,
  title: 'Title B1',
  html: '<h3>Content B1</h3>',
  icon: 'http://maps.google.com/mapfiles/markerB.png', // custom icon
  show_infowindow: false
}, {
  lat: 51.5,
  lon: -1.1,
  title: 'Title C1',
  html: [
    '<h3>Content C1</h3>',
    '<p>Lorem Ipsum..</p>'
  ].join(''),
  zoom: 8,
  icon: 'http://maps.google.com/mapfiles/markerC.png' // custom icon
}];
$(function() {
  var mapPlace = new Maplace({
    locations: LocsA,
    controls_on_map: false,
    map_div: '#map',
    type: 'directions',
    show_markers: true,
    map_options: {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    // styles: {
    //         'Night': [{
    //             featureType: 'all',
    //             stylers: [
    //                 { invert_lightness: 'true' }
    //             ]
    //         }],
    //         'Greyscale': [{
    //             featureType: 'all',
    //             stylers: [
    //                 { saturation: -50 },
    //                 { gamma: 0 }
    //             ]
    //         }]
    //     }	


  }).Load();
  mapPlace.directionsDisplay.setOptions({
    suppressMarkers: true
  });
  mapPlace.AddLocations(LocsA);
});