UPDATE I've tried implementing wf's solution, but the error still persists. You can take a look at a live example here --> .php

Scroll down and click the "Locations" tab

I'm trying to load google maps inside bootstrap tabs. I'm encountering the same problem discussed here, and extensively at SA --

The fix is to add a callback when the tab is clicked, to load the map than. I'm trying to implement this, with no success. The error still persists ( when only 1/8th of the map shows on the top left hand corner. ) When I open up inspect element, the map fills up and works fine (I'm guessing because inspect element is rereading the javascript)

Below is my javascript, and since this is my first real forray into it, I'm sure I'm doing something wrong --

  <script type="text/javascript">

    var map,
        marker = new google.maps.Marker({
                   position: new google.maps.LatLng(25.041483, 121.553984),
                   draggable: true,
                   title: 'Opo Apartment' }),
        infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});

        $('#location').on('show', function(e) {
          if( map == undefined) {  

            map =    new google.maps.Map(
                     document.getElementById('map-canvas'), 
                      { zoom: 14,
                        center: new google.maps.LatLng(25.041483, 121.553984),
                        mapTypeId: google.maps.MapTypeId.ROADMAP })
          }
          marker.setMap(map);
          infoWindow.open(map, marker);
        })

  </script>​

What are your thoughts on this?

UPDATE I've tried implementing wf's solution, but the error still persists. You can take a look at a live example here --> http://www.opohills./taipei-rentals/apollo_a.php

Scroll down and click the "Locations" tab

I'm trying to load google maps inside bootstrap tabs. I'm encountering the same problem discussed here, and extensively at SA --

https://github./twitter/bootstrap/issues/2330

The fix is to add a callback when the tab is clicked, to load the map than. I'm trying to implement this, with no success. The error still persists ( when only 1/8th of the map shows on the top left hand corner. ) When I open up inspect element, the map fills up and works fine (I'm guessing because inspect element is rereading the javascript)

Below is my javascript, and since this is my first real forray into it, I'm sure I'm doing something wrong --

  <script type="text/javascript">

    var map,
        marker = new google.maps.Marker({
                   position: new google.maps.LatLng(25.041483, 121.553984),
                   draggable: true,
                   title: 'Opo Apartment' }),
        infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});

        $('#location').on('show', function(e) {
          if( map == undefined) {  

            map =    new google.maps.Map(
                     document.getElementById('map-canvas'), 
                      { zoom: 14,
                        center: new google.maps.LatLng(25.041483, 121.553984),
                        mapTypeId: google.maps.MapTypeId.ROADMAP })
          }
          marker.setMap(map);
          infoWindow.open(map, marker);
        })

  </script>​

What are your thoughts on this?

• javascript
• jquery
• google-maps
• twitter-bootstrap

3 Answers 3

I made a fix around it, but keeping it in a different div, away from the tabs, and displaying it when a certain tab is clicked. You can go to the same site to see the code

$(document).ready(function(){

  var map,
      marker = new google.maps.Marker({
                 position: new google.maps.LatLng(25.041483, 121.553984),
                 draggable: true,
                 title: 'Opo Apartment' }),
      infoWindow = new google.maps.InfoWindow({content: 'Apollo Apartment'});



  $('#location').on('show', function(e) {
    if( map == undefined) {  

      map =    new google.maps.Map(
               document.getElementById('map-canvas'), 
                { zoom: 14,
                  center: new google.maps.LatLng(25.041483, 121.553984),
                  mapTypeId: google.maps.MapTypeId.ROADMAP })
    }
    document.getElementById("largemap").style.display="block";

    google.maps.event.trigger(map, 'resize');
            marker.setMap(map);
    infoWindow.open(map, marker);
  })
  $('.tabclick').on('show', function(e) {
    document.getElementById("largemap").style.display="none";

  })

})

Did you try like this?

$('#location').on('show', function(e) {
  if( map == undefined) {  

    map =    new google.maps.Map(
             document.getElementById('map-canvas'), 
              { zoom: 14,
                center: new google.maps.LatLng(25.041483, 121.553984),
                mapTypeId: google.maps.MapTypeId.ROADMAP })
  }
  marker.setMap(map);
  infoWindow.open(map, marker);

  google.maps.event.addListenerOnce(map, "bounds_changed", function() {
    google.maps.event.trigger(map, "resize");
  });
})

Thanks to alexxB in https://github./twbs/bootstrap/issues/2330

I use Cake, Bootstrap 3.0 an Jquery 1.11. First check that jquery functions trigers with any function to discard javascript problems then add this.

  $('a[href="#my_id_tab_map"]').on('shown.bs.tab', function(e)
    {
        google.maps.event.trigger(map, 'resize');
    });