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>
<div id="map-locator"></div>

CSS

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

JavaScript

var isIE11 = false;
var zoom = 14;
function initMap() {
  var myLatLng = {
    lat: -38.1632438,
    lng: 145.9190148
  };
  map = new google.maps.Map(document.getElementById('map-locator'), {
    zoom: zoom,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    // scrollwheel: scrollable,
    // draggable: draggable,
    styles: [{
      "stylers": [{
        "saturation": -100
      }]
    }],
  });
  var locations = [{
    title: 'Shopping - Aldi',
    position: {
      lat: -38.1626302,
      lng: 145.9247379
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
      scaledSize: new google.maps.Size(64, 64)
    }
  }, {
    title: 'Shopping - Woolworths',
    position: {
      lat: -38.160115,
      lng: 145.9283567
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Shop_3.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Shop_3.svg",
      scaledSize: new google.maps.Size(64, 64)
    }
  }, {
    title: 'Source Address',
    position: {
      lat: -38.159946,
      lng: 145.902425
    },
    icon: {
      url: isIE11 ? "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/png/Arrow_1.png" : "http://www.copeland.nextcode.com.au/application/themes/copelands/markers/svg/Arrow_1.svg",
      scaledSize: new google.maps.Size(96, 96)
    }
  }];
  var infow = new google.maps.InfoWindow();
  locations.forEach(function(element, index) {
    var marker = new google.maps.Marker({
      position: element.position,
      map: map,
      title: element.title,
      icon: element.icon,
    });
    marker.addListener('click', function(evt) {
       infow.setContent(element.title);
       infow.open(map,marker);
    })
  });
}
google.maps.event.addDomListener(window,...