Home/ Questions/Q 6636407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:10:55+00:00

Anyone with any ideas on what’s causing this weird glitch with the google maps

  • 0

Anyone with any ideas on what’s causing this weird glitch with the google maps UI components, be really grateful to hear from you!

enter image description here

the map is created with:

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

and the glitch is the same even with no markers.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    We ran into the same problem. The css designer was using this style:

    style.css 

    img {max-width: 100%; }

    Instead of disabling the zoom control, we fixed the problem by overriding the img style for map_canvas elements like so:

    style.css:

    #map_canvas img { max-width: none; }

    The zoom control now displays correctly.

    Setting “img max-width:100%” is a technique employed in responsive/fluid web site design so that images re-size proportionally when the browser is re-sized. Apparently some css grid systems have started setting this style by default. More info about fluid images here: http://www.alistapart.com/articles/fluid-images/ Not sure why this conflicts with the google map…

    • 0