JSFiddle - React, Tailwind, and code Playground

by Malin Jayakody

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script>

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

var myLatlng = new google.maps.LatLng(64.8, 24.8)
var myLatlng2 = new google.maps.LatLng(60, 24);
function initialize() {
  var mapOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    backgroundColor: '#FFF',
    disableDefaultUI: true,
    draggable: false,
    scaleControl: false,
    scrollwheel: false,

    styles: [
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
  }
]
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  geocoder = new google.maps.Geocoder();
  function codeAddress(address) {
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

  codeAddress('Turku')
  codeAddress('Naantali')
  codeAddress('Oulu')
  codeAddress('Imatra')
  codeAddress('Mannerheimintie 2, Helsinki')

  var swBound = new google.maps.LatLng(59.8, 19.3);
  var neBound...

CSS

html, body, #map-canvas {
    height: 100%;
    margin: auto;
    padding: 0;
    height: 600px;
    
}