JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<div id="gmap_polylines"></div>

CSS

html,
body,
#gmap_polylines {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var geocoder;
var map;

function initialize() {
  //    [{lat: 42, lng: -72}, {lat: 41, lng: -72.4}, {lat: 41.5, lng: -72.6}]
  latawal = 41.5;
  longawal = -72.4;

  var GoogleMaps = function() {
    var mapPolylines = function() {
      var map = new GMaps({
        div: '#gmap_polylines',
        lat: latawal,
        lng: longawal,
        zoom: 8,
        click: function(e) {
          console.log(e);
        }
      });

      path = [{
        lat: 42,
        lng: -72
      }, {
        lat: 41,
        lng: -72.4
      }, {
        lat: 41.5,
        lng: -72.6
      }];

      map.drawPolyline({
        path: path,
        strokeColor: 'Red',
        strokeOpacity: 0.6,
        strokeWeight: 4
      });
      for (var i = 0; i < path.length; i++) {
        map.addMarker({
          lat: path[i].lat,
          lng: path[i].lng,
        })
      }
    }
    return {
      //main function to initiate map samples
      init: function() {
        mapPolylines();
      }

    };

  }();
  GoogleMaps.init();
}
google.maps.event.addDomListener(window, "load", initialize);