How to keep Google Map static images on a fluid/responsive dimensions

Question

I have been googling about it a lot, but couldn't find any appreciable opinion over the same,

I need to incorporate a static google map image in a jQuery Mobile project, for building an app with phonegap. The map image has to fill the viewport almost completely. Question is how, as it will obviously be opened across different devices of different screen sizes. I have tried with the percentage approach, but that certainly doesn't work here.

I would like to get some guidance on keeping the layout for the google map static image in a fluid layout, in the simplest possible way (Please, if possible).

Thanks

Answer 1

load the largest image size you are going to need initially into a container e.g. size of 380 x 250

this will be position:relative with overflow hidden and max size you need.

figre 
    {
        position:relative;
        width: 100%;
        overflow:hidden;
    }

then absolutely position the using top & left to position the image centrally inside the container.

e.g.

figure img
    {
        position: absolute;
        top: calc(50% - 125px);
        left: calc(50% - 190px);
        }

Answer 2

I have tried to style Google Static Map to follow the Bootstrap by referring to this website http://webdesigntutsplus.s3.amazonaws.com/tuts/365_google_maps/demo/index.html

index.html

<div class="col-sm-8 map-wrapper">
    <a target="_blank" class="map-container" href="LINK_TO_GOOGLE_MAP">
         <img src="YOUR_GOOGLE_STATIC_MAP_QUERY">
    </a>
</div>

css

a.map-container {
    display: block;
    background-image: url("YOUR_GOOGLE_STATIC_MAP_QUERY");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    line-height: 0;
}
.map-container img
{
    max-width: 100%;
    opacity: 0;
}

The static map now is responsive on my website. I am not sure if it is applicable to you, but this is how I do it.