[RWD] Google maps

RWD with Google maps…

reference:
http://webomnizz.com/how-to-make-responsive-google-map-with-google-map-api/

方法一：css
HTML內容:

<div class="map-canvas" id="map-canvas">

<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="https://www.google.com.tw/maps/@24.7655142,121.0162967,15z?hl=zh-TW" width="425"></iframe>

</div>

css內容
.map-canvas {
position: relative;
padding-bottom: 26.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.map-canvas iframe,
.map-canvas object,
.map-canvas embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

方法二：javascript
HTML內容:

<div id="map-canvas" style="height: 300px; width: 100%;"></div>

javascript:
google.maps.event.addDomListener(window, 'resize', initMap);
google.maps.event.addDomListener(window, 'load', initMap)

function initMap() {
    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(24.801929, 120.971686),
        streetViewControl: false,
        scaleControl: true,
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            style: google.maps.ZoomControlStyle.LARGE
        },
        draggableCursor: 'crosshair'
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
}