JSFiddle - React, Tailwind, and code Playground

by ldiego

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" type="text/css" />

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

<style>
    .map {
        height: 500px;
        width: 500px;  
    }
    .ui-tabs .ui-tabs-hide {
        position: absolute;
        left: -10000px;
    }
</style>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
        <li><a href="#tabs-3">Tab3</a></li>
    </ul>
    <div id="tabs-1">
        <div id="map_canvas1" class="map"></div>
    </div>
    <div id="tabs-2">
        <div id="map_canvas2" class="map"></div>
    </div>
    <div id="tabs-3">
        <div id="map_canvas3" class="map"></div>
    </div>
</div>

JavaScript

$(document).ready(function(){
    
    demo('map_canvas1',-34.397, 150.644);
    demo('map_canvas2',-34.397, 150.644);
    demo('map_canvas3',-34.397, 150.644);
    
    $("#tabs").tabs({
        show: function(event, ui) {
            if(ui.index!=0)
                google.maps.event.trigger(maps[ui.index], 'resize');
        }
    });
    
});

var maps = [];

function demo(id,lat,lon) {
    var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(lat, lon),
          mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    maps.push(new google.maps.Map(document.getElementById(id),mapOptions));
}