JSFiddle - React, Tailwind, and code Playground

by paocemalin

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<div id="tabs">
          <ul>
            <li><a href="#tabs-1">Photos</a></li>
            <li><a href="#tabs-2">Equipement / Services</a></li>
            <li><a href="#tabs-3">Localiser</a></li>
          </ul>
          <div id="tabs-1"> </div>
          <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
          </div>
          <div id="tabs-3">
           	<div id="map"></div>
          </div>
          </div>

CSS

#map{
    width:500px;
    height:500px;
}

JavaScript

/*Script tabs-onglets*/
$(document).ready(function() {
    $( "#tabs" ).tabs({
	fx: { opacity: 'toggle'},
	show: function (event, ui){
		google.maps.event.trigger(map, 'resize');
	},
});
});

/*API GOOGLE MAPS*/
$(document).ready(function() {
		var myLatlng = new google.maps.LatLng(47.722478, -1.7317909999999301);
		var myLatlng = new google.maps.LatLng(47.722478, -1.7317909999999301);
var myOptions = {
	zoom: 8,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(
	document.getElementById('map'),
	myOptions
	)});