zoom bar is distorted - Githubissues

GoogleCodeExporter commented 9 years ago

What steps will reproduce the problem?
1.Built a Google Fusion table (displays correctly in web page)
2.Used FusionTablesLayer Builder to define two layers with different mappoints
3.Pasted HTML in web page. Zoom bar is distorted (see attachment)

What is the expected output? What do you see instead?
Main issue is the zoom bar that didn't display correctly.
Also I didn't see the two layers to be viewable. Only see the combined layer of 
all mappoints.

What version of the product are you using? On what operating system?
FusionTablesLayer Builder was used on 2/13/2013.  OS: Windows 7 Enterprise, 
Browsers tested on: IE9, Firefox(18.0.2), Chrome(Version 24.0.1312.57 m)

Please provide any additional information below.

Original issue reported on code.google.com by bevoshal...@gmail.com on 13 Feb 2013 at 4:56

Attachments:

zoom.JPG

GoogleCodeExporter commented 9 years ago

<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:500px; height:400px; }
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layerl0;
    var layerl1;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(32.4074259461474, -99.02541387939453),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var style = [
        {
          featureType: 'specs',
          elementType: 'all',
          stylers: [
            { visibility: 'off' }
          ]
        }
      ];
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
      map.mapTypes.set('map-style', styledMapType);
      map.setMapTypeId('map-style');
      layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'col0>>0'",
          from: '1DoYBSITQ606vSC61gJTKvGRuFvqM--imcFsC5zg',
          where: "col2>>0 in ('Waco', 'San Angelo', 'Abilene', 'Victoria', 'Beaumont', 'Austin', 'Dallas', 'Amarillo', 'College Station', 'Corpus Christi', 'El Paso', 'Fort Worth', 'Galveston', 'Houston', 'Lubbock', 'Odessa', 'Midland', 'San Antonio')"
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
      layerl1 = new google.maps.FusionTablesLayer({
        query: {
          select: "'col0>>0'",
          from: '1DoYBSITQ606vSC61gJTKvGRuFvqM--imcFsC5zg',
          where: "col2>>0 in ('Waco', 'Plano', 'San Angelo', 'Abilene', 'Victoria', 'Beaumont', 'Garland', 'Round Rock', 'Austin', 'Dallas', 'Amarillo', 'College Station', 'Corpus Christi', 'El Paso', 'Fort Worth', 'Galveston', 'Houston', 'Lubbock', 'Odessa', 'Midland', 'San Antonio', 'Irving', 'Georgetown', 'The Woodlands', 'Sugar Land')"
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Original comment by bevoshal...@gmail.com on 13 Feb 2013 at 5:09

GoogleCodeExporter commented 9 years ago

Yes same for me. Zoom bar is distorted.

Original comment by coreyjc...@gmail.com on 5 Apr 2013 at 3:11

GoogleCodeExporter commented 9 years ago

I had same issue (using unrelated JS libraries). This CSS hack fixed it:

http://tagmycode.com/snippet/265/solved-twitter-bootstrap-distorted-controls-wit
h-google-maps-v3#.UfLrtmQ4VHM

Original comment by stephen....@gmail.com on 26 Jul 2013 at 9:37

manna / fusiontableslayer-builder

zoom bar is distorted #52