如何使响应式iframe google地图全屏显示

要使响应式的iframe Google地图全屏显示，可以按照以下步骤进行操作：

创建一个包含Google地图的iframe元素，并设置其宽度和高度为100%。例如：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.856991021235!2d-122.08419748559698!3d37.42228972683997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807f1dbb7a9d%3A0x4a501367f076adff!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1638512345678!5m2!1sen!2sus" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

使用CSS样式将iframe元素的父容器设置为全屏显示。例如：

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #map-container {
        width: 100%;
        height: 100%;
    }
</style>

<div id="map-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.856991021235!2d-122.08419748559698!3d37.42228972683997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085807f1dbb7a9d%3A0x4a501367f076adff!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1638512345678!5m2!1sen!2sus" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

使用JavaScript监听窗口大小变化事件，并在事件触发时重新调整iframe元素的大小，以适应新的全屏尺寸。例如：

<script>
    window.addEventListener('resize', function() {
        var mapContainer = document.getElementById('map-container');
        var iframe = mapContainer.querySelector('iframe');
        iframe.style.height = mapContainer.offsetHeight + 'px';
    });
</script>

通过以上步骤，你可以实现一个响应式的iframe Google地图全屏显示。请注意，这只是一个示例，你可以根据实际需求进行调整和优化。