« HTML Tag Support Detection | Main | Using ZPT with Django »

March 16, 2012

Fixing the scrollbar issue in GoogleMaps InfoWindow

<script type="text/javascript">
var contentString = '<div style="max-width: 200px; overflow: hidden; display: none;" id="noscroll"><h4>The Business School</h4>29 Buccleuch Place, EH8 9JS</div>';

jQuery(document).ready(function(){

    var latlong = new google.maps.LatLng(55.942802, -3.186896);


    var opts = { 
      zoom: 15, 
      center: new google.maps.LatLng(55.945000, -3.186896),
      mapTypeControl: false,
      disableDefaultUI: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      scaleControl: true };

    var map = new google.maps.Map(document.getElementById("map"), opts);

    var infowindow = new google.maps.InfoWindow({ content: contentString, maxWidth: 100 });

    var marker = new google.maps.Marker({ position: new google.maps.LatLng(55.942802, -3.186896), map: map, title: "Business School" });


    infowindow.open(map, marker);

    });
</script>

The function call infowindow.open(map, marker) sets up your bubble content in two nested DIVs with overflow: auto styling set. This needs to be undone once the bubble is created. Hence the 2 second wait.

<script type="text/javascript">

var ns;

var flag = 0;

function fix_it(lag){

    setTimeout(function(){

        try{ 

            ns = document.getElementById('noscroll'); 

            var pops = ns.parentNode;

            var gramps = pops.parentNode;

            gramps.style.overflow = 'hidden';

            pops.style.overflow = 'hidden';

            ns.style.overflow = 'hidden';

            ns.style.display = 'block';

            }

        catch(e){ if(flag == 0){ flag = 1;  fix_it(2000); } }

        }, lag);

    }


jQuery(document).ready(function(){

    fix_it(2000);

    });

</script>

Tags: GoogleMaps , JavaScript

Posted by pj at March 16, 2012 10:42 PM

Comments