API Карт Google: max-width

Question

У меня возникли проблемы при попытке исправить проблему вертикальных полос в API Карт Google для javascript.

Дело в том, что у меня есть только доступ к jQuery, который автоматически загружается CRM.

На самом деле, мне нужно установить max-width на none для всех img-тегов внутри моей карты div (# map-canvas).

Это работает, если я редактирую HTML-код непосредственно из Firefox Tools, но я не могу найти способ сделать это автоматически.

код у меня есть доступ к выглядит следующим образом:

var mymap; 

jQuery.Class("MapView",{ 
    initialize:function(){ 
    var mapOptions = { 
     center: { lat: 45.447541, lng: 11.7451883}, 
     zoom: 14 
    }; 
    return new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
    } 
},{}); 

jQuery(document).ready(function(){ 
    mymap = MapView.initialize(); 
}); 

$(window).bind("load", function() { 
    $('#map-canvas').find('img').css('max-width: none'); 
    $("#map-canvas").hide().fadeIn('fast'); 
}); 

Я пытался кучу других онлайн-уроки, но я не смог решить эту проблему.

Кто-нибудь знает способ вытащить меня из этого?

Спасибо, Риккардо

EDIT: Итак, вот мой полный код до сих пор:

var mymap; 
var mymap_markers = []; 

jQuery.Class("MapView",{ 
    registerOnChangeEventOfSourceModule: function() { 
     jQuery('#sourceModule').on('change', function (e) { 
      jQuery('#picklistFields').find('option').remove().end().append('<option value="--">--</option>').val('--'); 

      var element = jQuery(e.currentTarget); 
      var params = {}; 
      var sourceModule = element.val(); 

      params = { 
       'module': 'Map', 
       'action': "GetCVAjax", 
       'mode': "changeModule", 
       'sourceModule': sourceModule 
      }; 

      AppConnector.request(params).then(
       function (data) { 
        if (data) { 
         jQuery.each(data.result.options, function (i, item) { 
          var o = new Option(item, i); 
          jQuery(o).html(item); 
          jQuery("#picklistFields").append(o); 
          jQuery("#picklistFields").trigger('liszt:updated'); 
         }); 
        } 
       }, 
       function (jqXHR, textStatus, errorThrown) { 
        alert(textStatus); 
       } 
      ); 
     }); 
    }, 

    registerOnChangeEventOfCustomView: function() { 
     jQuery('#picklistFields').on('change', function (e) { 
      var element = jQuery(e.currentTarget); 
      var params = {}; 
      var cvid = element.val(); 
      var module = jQuery('#sourceModule').val(); 

      params = { 
       'module': 'Map', 
       'action': "GetCVAjax", 
       'mode': "getMarkers", 
       'sourceModule': module, 
       'cvid': cvid 
      }; 

      for (var i = 0; i < mymap_markers.length; i++) { 
       mymap_markers[i].setMap(mymap); 
      } 
      mymap_markers = []; 

      AppConnector.request(params).then(
       function (data) { 
        if (data) { 
         jQuery.each(data.result, function (i, item) { 
          var myLatlng = new google.maps.LatLng(item['coords']['lat'],item['coords']['lng']); 
          var popupcontentCV = "<table class=\"table table-condensed table-striped table-bordered\"><tr><td colspan=\"2\"><strong>"+item['title']+"</strong></td></tr>"; 

          jQuery.each(item['data'], function (label, value){ 
           popupcontentCV += "<tr><td>"+app.vtranslate(label,module)+"</td><td>"+value+"</td></tr>"; 
          }); 
          popupcontentCV += "</table>"; 

          var infowindow = new google.maps.InfoWindow({ 
           content: popupcontentCV, 
           maxWidth: 315, 
           maxHeight: 550 
          }); 

          var marker = new google.maps.Marker({ 
           position: myLatlng, 
           map: mymap, 
           title: item['data']['title'] 
          }); 

          mymap_markers.push(marker); 

          google.maps.event.addListener(marker, 'click', function() { 
           infowindow.open(mymap,marker); 
          }); 
         }); 
        } 
       }, 
       function (jqXHR, textStatus, errorThrown) { 
        alert(textStatus); 
       } 
      ); 
     }); 
    }, 

    initialize:function(){ 
     var mapOptions = { 
      center: { lat: 45.447541, lng: 11.7451883}, 
      zoom: 14 
     }; 

     return new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
    } 
},{}); 

jQuery(document).ready(function(){ 
    mymap = MapView.initialize(); 
    MapView.registerOnChangeEventOfSourceModule(); 
    MapView.registerOnChangeEventOfCustomView(); 
}); 

google.maps.event.addListener(mymap, 'idle', function() { 
    $('#map-canvas img').css('max-width', 'none'); 
}); 
/* 
$(window).bind("load", function() { 
    $('#map-canvas').find('img').css('max-width: none'); 
    $("#map-canvas").hide().fadeIn('fast'); 
});*/ 

Answer 1

Попробуйте либо правила CSS или с JQuery:

CSS

#map-canvas img { 
    max-width: 100%; 
} 

JQuery

google.maps.event.addListenerOnce(map, 'idle', function() { 
    $('#map-canvas img').css('max-width', '100%'); 
}); 

Я не уверен, следует ли установить max-width в none или 100%. Попробуйте оба. И, возможно, попробуйте написать правило CSS с !important, если оно не работает сразу.

Для версии jQuery я добавил функцию css() на карте idle прослушиватель событий (поэтому вы уверены, что карта загружена и готова).

Редактировать

Я не могу проверить свой код, но вы можете попробовать этот способ:

jQuery(document).ready(function() { 

    mymap = MapView.initialize(); 

    google.maps.event.addListenerOnce(mymap, 'idle', function() { 
     $('#map-canvas img').css('max-width', '100%'); 
    }); 

    MapView.registerOnChangeEventOfSourceModule(); 
    MapView.registerOnChangeEventOfCustomView(); 
});