Correctly implementing a JQuery Google map plugin with the UI Tabs plugin

Question

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 ie 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; }

Answer 1

Call initialize() inside the $(document).ready function and remove google.maps.event.addDomListener(window, 'load', initialize); Also, give some width and height to the #map div in your css, if you haven't done this already

Correctly implementing a JQuery Google map plugin with the UI Tabs plugin

Question

1 answers

solution1
1 2015-12-30 00:57:03

Correctly implementing a JQuery Google map plugin with the UI Tabs plugin

Question

1 answers

solution1 1 2015-12-30 00:57:03

solution1
1 2015-12-30 00:57:03