Source : How to make Responsive Google Map with Google Map API, How to Make Google Maps Embeds Responsive.
Google Maps API responsive en full-CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.map-container { position: relative; padding-bottom: 26.25%; // Aspect ratio padding-top: 30px; height: 0; overflow: hidden; } .map-container iframe, .map-container object, .map-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
|
1 2 3 |
<div class="map-container"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&source=s_q&hl=de&geocode=&q=Bern&aq=&sll=28.9285745,77.09149350000007&sspn=3.379772,8.453979&ie=UTF8&hq=&hnear=Bern&t=m&z=12&ll=28.9285745,77.09149350000007&output=embed&iwloc=near"></iframe> </div> |
Google Maps API responsive en JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function initialize() { var mapOptions = { zoom: 9, center: new google.maps.LatLng(28.9285745, 77.09149350000007), mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById('location-canvas'), mapOptions); var marker = new google.maps.Marker({ map: map, draggable: false, position: new google.maps.LatLng(28.9285745, 77.09149350000007) }); } google.maps.event.addDomListener(window, 'resize', initialize); google.maps.event.addDomListener(window, 'load', initialize) |
|
1 |
<div id="location-canvas" style="width:100%;height:300px;"></div> |