Error message

User warning: The following module is missing from the file system: imagcache_actions. For information about how to fix this, see the documentation page. in _drupal_trigger_error_with_delayed_logging() (line 1143 of /var/www/vhosts/pixelthis.gr/httpdocs/includes/bootstrap.inc).

Responsive Google Maps

May
2016
23

Copy paste the embed code from google maps (if you do not know how to do this, read here: https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDeskto...), with a div wrapper
for example:

<div class="gmap-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52085.675957140v1463994936651" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>

Now add some CSS properties inside one of your stylesheet files:

.gmap-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.gmap-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

The 56.25% padding value comes from the aspect ratio 16:9. (9/16x100 = 56.25)
original post: https://www.ostraining.com/blog/coding/responsive-google-maps/?utm_conte...

Tags: 
Cats: 
this is an arrow pointing back to the top of the page