Изображения Google Map действительно крошечные внутри infowindow

Question

У меня есть скрипт, который работает над добавлением маркеров на карту с помощью инфоиндуста. Проблема в том, что изображения крошечные, но когда вы проверяете и наведите указатель мыши на объект img, размер правильный, а синий квадрат, показывающий, где холст сидит в главном окне, правильно пропорционален, это только фактическое изображение занимает часть холста.

Я не знаю, что вызывает это. Используя Инструменты для разработчиков, я удалил весь CSS, который, как представляется, влияет на него, и ничего не меняется, за исключением случаев, когда я удаляю 100% ширину, тогда холст имеет полный размер, но изображение все еще остается лишь частью холста.

Это Javascript

var startLat = 20; 
var startLng = 0; 
var startZoom = 2; 
var isAddress = false; 
var distributors = [{"logo":"http:\/\/www.elecro.demomycms.co.uk\/eshop\/files\/images\/distributor-logos\/5.jpg","name":"AG Budget Swimming Pool & Spas","contactNumber":"020 89416618","address":"Unit 10 Wilden Industrial Estate\nWilden Lane\nStourport on Severn\nWorcestershire","postcode":"DY13 9JY","latitude":"52.3504","longitude":"-2.26002"}]; 
var map; 
var geocoder; 

$(function() { 

    var mapOptions = { 
     zoom: startZoom, 
     center: new google.maps.LatLng(startLat, startLng) 
    } 
    var marker, i; 

    $('#map-canvas').height($('#map-canvas').width()/2); 
    var mapOptions = { 
     zoom: startZoom, 
     center: new google.maps.LatLng(startLat, startLng) 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    if (! isAddress && $('#country').val() > 0) { 
     GeocodeCountry(); 
    } 

    for (i = 0; i < distributors.length; i++) { 
     var $distributor = distributors[i]; 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng($distributor.latitude, $distributor.longitude), 
      map: map 
     }); 
     var infowindow = new google.maps.InfoWindow(); 
     marker.html = '<div class="container-fluid" style="width: 300px">\ 
      <h1 class="row-fluid">\ 
       '+($distributor.logo ? '<div class="span3"><img src="'+$distributor.logo+'" style="width: 100%"></div>' : '')+'\ 
       <span class="span9">'+$distributor.name+'</span>\ 
      </h1>\ 
      <div class="row-fluid">\ 
       <div class="span6">'+$distributor.address+'<br>'+$distributor.postcode+'</div>\ 
       <div class="span6">'+($distributor.url ? '<a href="'+$distributor.url+'">'+$distributor.url+'</a>' : '')+'<br>'+$distributor.contactNumber+'</div>\ 
      </div>\ 
     </div>'; 

     google.maps.event.addListener(marker, 'click', (function() { 
      return function() { 
       infowindow.setContent(this.html); 
       infowindow.open(map, this); 
      } 
     })(marker, i)); 
    } 

}); 

function GeocodeCountry() { 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({'address': $('#country').find('option:selected').text()}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      map.fitBounds(results[0].geometry.viewport); 
     } 
    }); 
} 

Вы, наверное, заметили, код Bootstrap 2 в HTML, мы используем Bootstrap 2 на сайте, но я не входит в какой-либо из CSS/JS файлов в скрипке ниже, и он по-прежнему делает то же самое, поэтому на него не влияет Bootstrap.

Вы можете увидеть JS скрипку этого здесь: http://jsfiddle.net/styphon/raLcmbvc/

Я только включал один пример маркера в JS Fiddle, но на сайте есть более 200, и он делает то же самое со всеми из них. Это сайт, если вы хотите видеть: http://elecro.demomycms.co.uk/distributors.php

Answer 1

Вашего тестирование изображение огромно, а также содержит много пробелов справа и снизу: http://www.elecro.demomycms.co.uk/eshop/files/images/distributor-logos/5.jpg

Тогда вы также применить width:100% CSS к изображению, поэтому он будет изменен, чтобы соответствовать окну.

В зависимости от того, что вы хотите достичь, вы можете либо:

• User a better image without whitespace
• Remove the width:100%

Answer 2

Проблема в том, что изображение, которое ваше отображение само по себе имеет большую часть себя, как белый! Перейдите по ссылке: http://www.elecro.demomycms.co.uk/eshop/files/images/distributor-logos/5.jpg и попробуйте сохранить изображение и посмотреть его размеры. Его огромный размер размером 1433x755, из которых почти 90% площади - белый фон. Поэтому удалите лишний белый фон, обрезая изображение, и вы должны быть хороши, чтобы идти. Остальное все кажется прекрасным. Вы можете настроить размер изображения в строке кода <div class="container-fluid" style="width: 300px">, указав соответствующую ширину, но сначала измените изображение.