CODEWITHSUNDEEP
javascriptjquerygoogle-mapstwitter-bootstrap
Stepan Parunashvili
Stepan Parunashvili

Reputation: 2845

Loading Google Maps inside bootstrap tabs, fix is showing blank

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.com/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.com/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?

Upvotes: 1

Views: 6030

Answers (3)

user3461820
user3461820

Reputation: 1

Thanks to alexxB in https://github.com/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');
    });

Upvotes: -1

Stepan Parunashvili
Stepan Parunashvili

Reputation: 2845

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";

  })

})

Upvotes: 5

wf9a5m75
wf9a5m75

Reputation: 6158

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");
  });
})

Upvotes: 2

Related Questions