CODEWITHSUNDEEP
javascripthtmlgoogle-maps-api-3
Styphon
Styphon

Reputation: 10447

Google Map images are really tiny inside infowindow

I've got a script working to add markers to a map with an infowindow. The problem is that the images are tiny, yet when you inspect and hover over the img entity the size is correct, and the blue box that shows where the canvas sits in the main window is correctly proportioned, it's just the actual image takes up a fraction of the canvas.

I've no idea on what is causing this. Using the Developer Tools I've removed all CSS that appears to be affecting it and nothing changes, except if I remove the 100% width, then the canvas goes full size, but the image is still only a fraction of the canvas.

This is the 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);
        }
    });
}

You have probably noticed the Bootstrap 2 code in the HTML, we're using Bootstrap 2 on the site, but I've not included any of the CSS / JS files in the fiddle below and it is still doing the same thing, so it's not Bootstrap affecting it.

You can see a JS fiddle of this here: http://jsfiddle.net/styphon/raLcmbvc/

I've only included one example marker in the JS Fiddle, but on the site there are over 200 and it does the same with all of them. This is the site if you want to see: http://elecro.demomycms.co.uk/distributors.php

Upvotes: 1

Views: 79

Answers (2)

Blaise
Blaise

Reputation: 13479

Your testing image is huge, and also contains a lot of whitespace on right and bottom: http://www.elecro.demomycms.co.uk/eshop/files/images/distributor-logos/5.jpg

Then you also apply width:100% CSS to your image, so it will be resized to fit the window.

Depending on what you want to achieve, you could either:

Upvotes: 1

ihimv
ihimv

Reputation: 1484

The problem here is that the image which your displaying is itself having large portion of itself as white! See the link: http://www.elecro.demomycms.co.uk/eshop/files/images/distributor-logos/5.jpg and try saving the image and looking its dimensions. Its a huge 1433x755 size image of which almost 90% area is white background. So remove the extra white background by cropping the image and you be should be good to go. Rest everything seems fine. You can adjust image size in your code line <div class="container-fluid" style="width: 300px"> by giving appropriate width but first change the image.

Upvotes: 1

Related Questions