谷歌地图 API答案

【问题标题】：Google Maps API谷歌地图 API
【发布时间】：2013-08-05 11:53:18
【问题描述】：

所以我一直致力于在我的网页中包含谷歌地图。我已经创建了它来填充它自己的 html 页面上 100% 的屏幕。现在我想将地图包含在更小以适合我的网页中。 include() 函数可以在我的网页上正常工作，因此我得到了预期的正常页眉和页脚。唯一错误的是我设置的正确 div 中没有出现地图。附件是工作并创建地图的 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{ 白颜色; 边距顶部：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%;
    }

【问题讨论】：

标签： php javascript html css google-maps-api-3

【解决方案1】：

有点像..

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

【讨论】：

【解决方案2】：

您只需将其放在具有您想要的高度、宽度和位置的元素内。下面这行 JS 实际上是将地图放入页面上的特定元素中：

JS：

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

HTML：

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

CSS：

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

【讨论】：