Ich hatte mir mal ne responsive Lösung für die dlh_googlemaps erarbeitet. Vielleicht ist das ja genau das, was du benötigst. Hier ist sie im Einsatz http://yesdo.de/kontakt.html
ce_dlh_googlemaps_responsive
PHP-Code:
// snip
if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
}
// Responsive patch
var center;
function calculateCenter() {
center = gmap<?php echo $this->map['id']; ?>.getCenter();
}
google.maps.event.addDomListener(gmap<?php echo $this->map['id']; ?>, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
google.maps.event.trigger(gmap<?php echo $this->map['id']; ?>, 'resize');
gmap<?php echo $this->map['id']; ?>.setCenter(center);
});
// Responsive patch END
<?php
// tabcontrol
echo $this->tabs ? $this->map['tabsCode'] : ''; ?>
// snip
Er besteht aus diesem Patch Block im Template. Die Map ist auf 100% Breite und Höhe eingestellt. Die Höhe regelt man mit dem padding-bottom - bei 100% ist es quadratisch. Bei 62.5% hast du ein Verhältnis 16:10 (10 / 16 = 0,625).
CSS:
HTML-Code:
/* ... Googlemap responsive ...
-------------------------------------------------------------------------------------------------*/
.ce_dlh_googlemaps {
padding-bottom: 56.25%;
position: relative;
}
.dlh_googlemap {
position: absolute;
}
/* ... Googlemap responsive ... END
-------------------------------------------------------------------------------------------------*/
Ich habe bei mir noch das hier drin
HTML-Code:
.dlh_googlemap {
width: calc(100% - 20px) !important;
}
Aber das ist glaube ich nur wegen des Grids welches da noch drauf liegt.
Lesezeichen