I can't get to see the google map on my Jquery ui tabs that I created, I can see the frame but no map location or anything. What Do I need to do to fix this?
What I tried to do is a Jquery ui Tabs i.e 3 tabs and one has a small JavaScript Google Map
<script src="https://maps.googleapis.com/maps/api/js"></script> <script> $(document).ready(function() { $(function() { $( "#tabs" ).tabs(); }); }); function initialize() { var mapCanvas = document.getElementById('map'); var mapOptions = { center: new google.maps.LatLng(2.0333, 45.3500), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>Lorem ipsum</h1> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-12"></div> <img src="image1.jpg" class="img1" alt="Cinque Terre" width="800" height="490"> <div id="tabs"> <ul> <li><a href="#tabs-1">Lorem ipsum</a></li> <li><a href="#tabs-2">Lorem ipsum</a></li> <li><a href="#map">Lorem ipsum</a></li> </ul> <div id="tabs-1"> <p>l lorem ipsum jfsdjkng jkgndksjgn djkndsjkgns lorem ipsum jfsdjkng jkgndksjgn djkndsjkgnsorem ipsum jfsdjkng jkgndksjgn djkndsjkgns </p> </div> <div id="tabs-2"> <form role="form"> <label class="radio-inline"> <input type="radio" name="optradio">lorem Star </label> <label class="radio-inline"> <input type="radio" name="optradio">lorem Star </label> <label class="radio-inline"> <input type="radio" name="optradio">lorem Star </label> </form> <br> </div> <div id="map"></div> </div> #map { width: 300px; height: 280px; }
