将浏览器屏幕分为三个部分（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>