php - 谷歌地图 API

Question

所以我一直致力于在我的网页中包含谷歌地图。我已经创建它以在其自己的 html 页面上填充 100% 的屏幕。现在我想将 map 包含得更小以适合我的网页。 include() 函数在我的网页上工作，所以我得到了预期的正常页眉和页脚。唯一错误的是没有 map 出现在我设置的正确 div 中。附件是用于创建 map 的 javascript 文件以及包含页眉和页脚并尝试创建 map 的模板文件。

    //Create the function to initiaze the map
  function initialize() {
            //Map options must contain a center, an id, and a zoom  
    var mapOptions = {
      center: new google.maps.LatLng(34.26, 27.19),
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.HYBRID,
              //Don't want the user to be able to pan or zoom
              disableDefaultUI:true
    };

            //Create a new instance of google maps inserting it into the id map-canvas and the map-options
            var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

            //Create a varaible to hold our coordinates for a marker        
            var trip1=new google.maps.LatLng(2.00,77.30);

            var contentString='This is a sample window that can include clickable links to pictures and styled text for example';

            var infowindow=new google.maps.InfoWindow({
                    content:contentString
            });

            //Create the google maps marker with the position as the the trip1 variable
            var marker = new google.maps.Marker({
                     position: trip1,
                             title:'Ecuador',
                             map:map
            });



            google.maps.event.addListener(marker,'click',function(){
                    infowindow.open(map,marker);
            });


            }

            google.maps.event.addDomListener(window, 'load', initialize);

现在这是网站的 php 文件

    <?php include('../includes/educateHeader.php');?>

    <script type="text/javascript" charset="utf-8" src="map.js"></script>

    <div class="bio">
    <h1>About Us</h1>
    </div>

    <div id="map-canvas">
    <h1>The Many Journeys of OEC</h1>
    </div>


    <?php include('../includes/educateFooter.php');?>

还有一些 css 文件以防万一，我不确定 .生物{ 白颜色; 边距顶部:20px； 底部边距:30px； 职位:相对；

    .bio h1{
    text-align:center;
    }

    #map-canvas{
    postion:relative;
    margin-top:20px;
    }

    #map-canvas h1{ 
    color:white;
    text-align:center;
    }
    BODY{
    margin-left:15%;
    margin-right:15%;
    background:url("umichBackground.jpg") no-repeat center center fixed;
    margin-bottom:0%;
    margin-top:0%;
    background-size:cover;
    -o-background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    height:100%;
    }       

    HTML{
    height:100%;
    }

Answer 1

有点像..

#map-canvas {
   width: 500px;
   height: 500px;
}

?