google-maps - 将浏览器屏幕分成三个部分（Google Maps API）

Question

我正在尝试将浏览器屏幕分成三个部分，每个部分将显示来自 Google Maps API 的不同地图位置。这是图像链接，因此您可以看到我需要如何拆分屏幕。有人有任何 CSS/HTML 建议吗？

https://meocloud.pt/link/083af416-c99f-4681-bc57-8124b9899158/maps.jpg

谢谢！

Answer 1

您需要了解一点CSS才能以这种方式显示地图...

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    var map,map2, map3;

    function initialize(condition) {
    // create the map
        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(41.1255275,-73.6964801),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var myOptions2 = {
            zoom: 8,
            center: new google.maps.LatLng(41.1255275,-73.6964801),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }

        var myOptions3 = {
            zoom: 2,
            center: new google.maps.LatLng(41.1255275,-73.6964801),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map  = new google.maps.Map(document.getElementById("map1"), myOptions);
        map2 = new google.maps.Map(document.getElementById("map2"), myOptions2);  
        map3 = new google.maps.Map(document.getElementById("map3"), myOptions3);  
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div style=" display:inline;" >
    <div style=" float:left; width:50%;" >
        <div id="map1" style="width:100%; height:100%; margin:0px;" ></div>
    </div>
    <div style="float:left; width:50%;" >
        <div id="map2" style="width:100%px; height:50%; margin:0px;" ></div>
        <div id="map3" style="width:100%px; height:50%; margin:0px;" ></div>
    </div>
</div>