-1

I'm using Fusion tables to populate a Google Map. It works fine on IE11 and Firefox but the markers do not show up in Chrome (latest version). I am getting an error in the console: 'Attr.textContent' is deprecated. Please use 'value' instead.

var geocoder;
var map, layer;

function initialize() {
       geocoder = new google.maps.Geocoder();
       var styles = [
                 {
                   "stylers": [
                     { "invert_lightness": true },
                     { "saturation": -100 },
                     { "gamma": 1 },
                     { "lightness": 11 }
                   ]
                 },{
                   "featureType": "water",
                   "stylers": [
                     { "lightness": -100 }
                   ]
                 }];
       var mapOptions = {
         center: new google.maps.LatLng(lat, lon),
         zoom: 6,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         styles: styles
       };
       map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);


        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'latitude',
            from: fusiontableid
          },
          map: map,
          styleId: 2,
          templateId: 3
        });


     }
     google.maps.event.addDomListener(window, 'load', initialize);

Any work-arounds for this?

KRay
  • 71
  • 2
  • 10
  • Sounds like a problem with your HTML. What does that look like? What are lat, lon, fusiontableid? – geocodezip Jul 23 '14 at 22:54
  • clear the browser-cache – Dr.Molle Jul 23 '14 at 23:59
  • The [code you have posted works (with a different FusionTable)](http://jsfiddle.net/7FYbx/) – geocodezip Jul 24 '14 at 00:35
  • I've added the fusiontableid to the code in geocodezip's fiddle and it works fine. After disabling the css and javascript libraries loaded in the head before the Google Maps code the markers show up fine. I'll go through line by line to find the conflict and post when I find it. – KRay Jul 24 '14 at 01:04

1 Answers1

0

Found it! It was a CSS problem:

img, object, embed {
    max-width: 100%;
    height: auto;
}

img {
    -ms-interpolation-mode: bicubic;
}

#map_canvas img, .map_canvas img {
    max-width: none !important;
}

The max-width: 100% line was messing with the map styling - the following #map_canvas is intended to override it, but since my canvas id was map-canvas it was not applying.

KRay
  • 71
  • 2
  • 10