將瀏覽器屏幕分爲三個部分（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>