谷歌地圖API

Question

所以我一直在努力將谷歌地圖包括在我的網頁中。我已經創建它來在自己的html頁面上填充100％的屏幕。現在我想將地圖縮小以適合我的網頁。 include（）函數可以在我的網頁上工作，我可以像預期的那樣獲得正常的頁眉和頁腳。唯一錯誤的是沒有地圖出現在我設置的適當的div中。 Attatched是一個JavaScript文件，用於創建地圖和包含頁眉和頁腳的模板文件，並嘗試創建地圖。

//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文件，我不知道 .BIO { 顏色：白色; margin-top：20px; margin-bottom：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; 
} 

？

Answer 2

你只需要把它放在一個有你想要的高度，寬度和位置的元素中。下面JS的這條線是什麼是真正把地圖上的特定元素的內部網頁上：

JS：

var map = new google.maps.Map(document.getElementById("myElement"), mapOptions); 

HTML：

<div id="myElement"></div> 

CSS：

#myElement { 
    width: 300px; 
    height: 300px; 
}