Google 웹 페이지에 Google지도를 포함하여 작업하고 있습니다. 나는 그것의 자신의 html 페이지에 스크린의 100 %를 채우기 위해 이미 그것을 만들었습니다. 이제는 내 웹 페이지에 맞게 더 작게지도를 포함하고 싶습니다. include() 함수는 내 웹 페이지에서 정상적인 머리글과 바닥 글을 예상대로 가져옵니다. 내가 잘못 설정 한 적절한 div에는지도가 표시되지 않습니다. Attatched는 작동하는 자바 스크립트 파일이며, 머리글과 바닥 글을 포함하고지도를 만들려고하는 템플릿 파일을 만듭니다.Google지도 API
//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; 여백 - 하단 : 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%;
}
JS 행은 아래 실제로 페이지에 특정 요소 내부지도를 가하고 것입니다 고마워요 !! 그것은 내가 항상 잊어 버린 단순한 것입니다. –
아무런 문제가 없습니다. 항상 배울 것이 더 있습니다. – dezman