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 class="container">
  <div id="map-canvas-left"></div>
  <div id="map-canvas-right"></div>
  <div id="map-canvas-three"></div>
</div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
html {
	height: 100%;
}
body {
	height: 100%;
	margin: 0;
	padding: 0;
}
.container {
  width: 100%;
  display: flex;
}
#map-canvas-left, #map-canvas-right, #map-canvas-three {
	height: 250px;
  width: 550px;
}
#iw_container .iw_title {
	font-size: 16px;
	font-weight: bold;
}
.iw_content {
	padding: 15px 15px 15px 0;
}

JavaScript

// *
// * Two maps on the same page, expanded to three
// * 2015 - en.marnoto.com
// *

// necessary variables
var mapLeft, mapRight, mapThree;
var infoWindowLeft, infoWindowRight, infoWindowThree;

// markersData variable stores the information necessary to each marker
var markersDataLeft = [
   {
      lat: 40.6486333,
      lng: -8.745,
      name: "Camping Praia do Farol",
      address1:"Rua Diogo Cão, 125",
      address2: "Praia da Barra",
      postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the     last item of each marker
   },
   {
      lat: 40.54955,
      lng: -8.7498167,
      name: "Camping Costa Velha",
      address1:"Quinta dos Patos, n.º 2",
      address2: "Praia da Costa Nova",
      postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in     the last item of each marker
   },
   {
      lat: 40.6447167,
      lng: -8.7129167,
      name: "Camping Gafanha da Boavista",
      address1:"Rua dos Balneários do Complexo Desportivo",
      address2: "Gafanha da Nazaré",
      postalCode: "3830-225 Gafanha da Nazaré" // don't insert comma in the  last item of each marker
   } // don't insert comma in the last item
];

var markersDataRight = [
   {
      lat: 40.6386333,
      lng: -8.745,
      name: "Camping Praia da Barra",
      address1:"Rua Diogo Cão, 125",
      address2: "Praia da Barra",
      postalCode: "3830-772 Gafanha da Nazaré" // don't insert comma in the    last item of each marker
   },
   {
      lat: 40.59955,
      lng: -8.7498167,
      name: "Camping Costa Nova",
      address1:"Quinta dos Patos, n.º 2",
      address2: "Praia da Costa Nova",
      postalCode: "3830-453 Gafanha da Encarnação" // don't insert comma in     the last item of each marker
   },
   {
      lat: 40.6247167,
      lng: -8.7129167,
      name: "Camping Gafanha da Nazaré",
      address1:"Rua dos Balneários do Complexo Desportivo",
      address2: "Gafanha da Nazaré",
      postalCode: "3830-225 Gafanha da Nazaré" // don't...