Search code examples
cssgoogle-mapsgoogle-maps-api-3google-street-view

Streetview not displaying the image properly if the height of the map is greater

I have used the streetview according to the following

/* Map html */
<div id="mapDiv" class="">
    <div id="map-holder">
    <div id="map_canvas" class="bigmap"></div>
    <div id="map_stv" class="minimap" style="display: none"></div>
    </div>
</div>

/* Css associated */
.bigmap{
    width:100%;
    height:100%;
}

.minimap{
    width:50%;
    height:100%;
}
#map_stv {
    position: absolute;
    top: 0;
    right: 0;
}
#map_stv img {
    border: none !important;
    max-width: none !important;
}

When ever i need to show the streetview then i add the minimap class to the map_canvas and toggle map_stv. Its working fine. But when the dimensions of the map is 768x1024 then i get the following issue

enter image description here

Has anyone faced this? Any pointers on this?

Solution

  • I made a fiddle for you!

    The problem is, is that your map was stretching too far for the images thus having the top of the streetview images cut off.

    To make your map responsive I just added:

    style="width: 99%; height: 99%;

    To your #map-holder div.

    In conclusion my best bet would be to try and stick to a more or less even aspect ratio with your map width and height