How to save static images in Google Map on flexible / flexible dimensions

Question

I walked a lot about this, but I couldn’t find any noticeable opinion on this,

I need to include a static Google map image in a jQuery Mobile project to create a telephony application. The map image should fill the viewport almost completely. The question is how, since it will obviously be open on different devices of different screen sizes. I tried with a percentage approach, but this certainly does not work here.

I would like some guidance on saving the layout for a static image of a google map in a liquid layout in the easiest way (please, if possible).

thanks

Answer 1

load the largest image size that you need first in a container, for example. size 380 x 250

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

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

then set the position top and left to center the image inside the container.

eg.

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

Answer 2

I tried setting up a Google Static Map to follow Bootstrap by accessing 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 is now responding to my site. I'm not sure if it applies to you, but that’s how I do it.

Answer 3

You can use an intermediate plugin, for example, Picturefill, which will allow you to deliver the corresponding image to each user depending on many conditions, such as screen size, viewport size, screen resolution, etc.

http://scottjehl.imtqy.com/picturefill/

Using:

 <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=800x800&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=500x500&scale=2&sensor=TRUE_OR_FALSE 2x" media="(min-width: 800px)"> <source srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x"> <!--[if IE 9]></video><![endif]--> <img style="width:100%" srcset="http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=800x300&sensor=TRUE_OR_FALSE, http://maps.google.com/maps/api/staticmap?center=37.386052,-122.083851&zoom=13&markers=size:small|Mountain+View,CA&size=300x300&scale=2&sensor=TRUE_OR_FALSE 2x" alt="Google Map"> </picture> <script src="http://cdnjs.cloudflare.com/ajax/libs/picturefill/2.0.0/picturefill.min.js" async></script>