我写了以下代码：
map.js
function initialize(){
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService();
geocoder = new google.maps.Geocoder();
//var greece = new google.maps.LatLng(38.4920058, 22.9803685);
var mapOptions = {
center: { lat: 38.4920058, lng: 22.9803685 },
zoom: 5,
panControl: false,
streetViewControl: false,
zoomControl: false
};
var autoCompleteOptions = {
types: ['geocode'],
componentRestrictions: {country: 'GR'}
};
var rendererOptions = {
map: map
}
// Create a renderer for directions and bind it to the map.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
autoCompleteFromDestination=newgoogle.maps.places.Autocomplete(document.getElementById('fromDestination'),autoCompleteOptions);
autoCompleteToDestination=new google.maps.places.Autocomplete(document.getElementById('toDestination'),autoCompleteOptions);
// Instantiate an info window to hold step text.
stepDisplay = new google.maps.InfoWindow();
}
google.maps.event.addDomListener(window, 'load', initialize);
和一个html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
/* #mapCanvas{
position:relative;
top:60px;
width: 80%;
left: 10px;
height: 500px;
margin: 0;
border:solid 1px #CCCCCC;
} */
</style>
<link rel="stylesheet" type="text/css" href="../stylesheets/default1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript" src="../includes/map.js" ></script>
<title><?php echo $PageTitle; ?></title>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</html>
和default1.css：
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin:0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
@media print {
body {
/*
background: #ffffff url(../images/vbox_gradient.png) repeat-x 0 top;
background: #dce9f7 url(../images/body_bg.png) repeat-x 0 top;
background:url(../images/vbox_gradient.png);
*/
background-repeat:repeat-x;
margin:0px;
padding-top:0px;
padding-bottom:0px;
padding-left:15px;
padding-right:15px;
width: 100%;
height: 100%;
}
}
html,body{
height:100%;
}
body {
width: 100%;
height: 100%;
margin:0px;
padding:0px;
line-height: 1;
}
body p{
margin:1px;
font-size:12px;
line-height:15px; /* Θέτει το ύψος γραμμής στα 15px. */
font-family:Verdana,Arial,Helvetica,sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family:Verdana,Arial,Helvetica,sans-serif;
padding-bottom:4px;
line-height:110%; /* Θέτει το ύψος γραμμής στο 100% του τρέχον font size. */
text-align:left;
}
p.center {
text-align:center;
}
.redtext {
color:red;
text-align:center;
}
.forms{
width: 500px;
height:100%;
position:relative;
left:80px;
margin-left:2px;
margin-right:2px;
}
img {
border:none;
max-width:100%; /* ορίζει το max-width του img element σε % του containing block. */
max-height:100%; /* ορίζει το max-height του img element σε % του containing block. */
}
table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
border-spacing: 0;
border:none;
table-layout:auto; /* thetei to table-layout algorithm gia xr;hsh se ena table
auto: default timh : to width ths colonas thetete sto pio platy periex;omeno poy den spaei sthn epomenh grammh
sta kelia, einai argo afoy xreiazetai na diabasei tom periexomeno ston pinaka prin orisei to teliko layout
*/
}
td {
font-size:12px;
vertical-align:top; /* alignment of the content of a cell */
border:none;
}
td.vmiddle {
vertical-align:middle;
}
div {
font-size:12px;
}
input[type="text"], input[type="password"], input[type="file"] {
font-size:12px;
}
textarea {
font-size:12px;
}
input[type="submit"], input[type="button"], input[type="reset"] {
font-size:12px;
background-color:#FBE904;
border:1px solid black; /* border width = 1px se oles tis pleyres (pano,kato,dejia,aristera)
to border-style = solid (required)
to border-color=black. (koita shorthand property toy border)
*/
}
select, option {
font-size:12px;
}
label {
font-weight:bold;
text-align:right;
float:right;
padding-right:4px;
}
div.error_div {
text-align:center;
font-size:12px;
font-weight:bold;
color:#C00000;
padding:2px 2px 2px 2px; /* se oles tiw pleyres exo padding 2px */
border:1px solid #C00000;
background-color:yellow;
margin-left:auto; /* o browser ypologizei ena left margin */
margin-right:auto;
margin-top:4px;
margin-bottom:4px;
}
div.info_div {
text-align:center;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
padding:2px 2px 2px 2px;
border:1px solid #000000;
background:url('/images/fon_but.gif');
margin-left:auto;
margin-right:auto;
margin-top:4px;
margin-bottom:4px;
}
.info_div {
text-align:center;
font-size:12px;
font-weight:bold;
color:#000000;
padding:2px 2px 2px 2px;
margin-left:auto;
margin-right:auto;
margin-top:1px;
margin-bottom:1px;
}
p.file_catalog_title {
background:url(/images/m3.gif);
background-repeat:no-repeat;
display:block;
width:440px;
line-height:28px;
padding-top:2px;
padding-bottom:2px;
padding-left:10px;
padding-right:10px;
}
p.info_text {
color:#0000C0;
padding:2px 2px 2px 2px;
}
p.error_text {
color:#CC0000;
padding:2px 2px 2px 2px;
}
p.small_text {
font-size:12px;
}
li.articleItem {
list-style-image:url('../images/li_bullet.gif'); /*antikathista to list type (circle,disk) me mia image */
list-style-position:outside; /* kathorizei an tha emfanistei mesa h ejo apo to periexomeno toy list-style-position
*/
}
li.eventItem {
list-style-image:url('../images/li_cal.gif');
list-style-position:outside;
}
li.fileItem1 {
list-style-image:url('../images/li_file.gif');
list-style-position:outside;
}
li.fileItem2 {
list-style-image:url('../images/li_file2.gif');
list-style-position:outside;
}
li.user_other {
list-style-image:url('../images/user_other.png');
list-style-position:outside;
}
li.user_normal {
list-style-image:url('../images/user_orange.png');
list-style-position:outside;
}
li.user_author {
list-style-image:url('../images/user_green.png');
list-style-position:outside;
}
li.user_administrator {
list-style-image:url('../images/user_suit.png');
list-style-position:outside;
}
p.byauthor {
font-size:12px;
font-style:italic;
}
p.keywords {
font-size:12px;
font-style:italic;
color:#A0A0A0;
}
p.summary {
font-size:12px;
font-style:italic;
}
p.articleTitle {
font-size:12px;
text-align:left;
}
p.articleSummary {
font-size:12px;
text-align:justify;
}
span.small_gray_text {
font-size:12px;
color:gray;
}
img.mini_image {
width:96px;
height:96px;
border:1px solid #C0C0C0;
float:left;
clear:right; /*katharizei to periexomeno apo adjacent images */
margin-top:4px;
margin-bottom:4px;
margin-left:4px;
margin-right:4px;
}
/* ----------------------- DIVs ---------------------------------- */
#container{
min-height:100%;
position:relative;
}
#ActivePage {
background-color:#03F;
width: 100%;
min-height: 100%;
margin-left:auto;
margin-right:auto;
padding-bottom: 300px;
/*
background:url(../images/vbox_gradient.png);
background-repeat:repeat-x;
*/
}
#header{
padding:0px;
overflow:hidden;
height:124px;
background: #ffffff url(../images/vbox_gradient.png) repeat-x 0 top;
clear:both;
}
#body{
padding:10px;
padding-bottom:60px;
}
#PageFooter{
position:relative;
bottom:0;
width:100%;
height:60px;
top:10px;
color:black;
text-align:center;
padding-top:15px;
padding-bottom:5px;
line-height:12px;
clear:both;
background:url(../images/vbox_gradient_footer.png);
background-repeat:repeat-x;
}
#PageFooter p {
color:#000000;
font-size:9px;
line-height:18px;
text-align:center;
}
#PageFooter a {
color:#000000;
}
#PageHeader {
position:relative;
width:1220px;
height:90px;
/* background:url(../images/fontop1.png); */
/* vertical-align:middle; /* topotheteitai sto middle toy parent element */
margin-left:auto;
margin-right:auto;
padding-bottom:5px;
}
#PageHeader td{
font-variant:small-caps;
font-stretch:expanded;
font-size:40px;
}
#PageMenus {
width:1220px;
height:20px;
color:#FFFF00;
line-height:16px;
font-size:12px;
font-weight:bold;
/* vertical-align:middle;*/
margin-left:auto;
margin-right:auto ;
/*background-color:#C7DDFE;*/
}
#PageMenus p {
color:#FFFF00;
line-height:16px;
background:url(../images/fonbut.png);
font-size:12px;
font-weight:bold;
margin:0px 0px 0px 0px;
vertical-align:middle;
}
#PageMenus a {
color:#FFF;
font-weight:bold;
display:inline-block; /* display : inline => default display , display an element as an inline element (span)
display : block => display an element as a block element (like p)
display : inline-block => display an element as an inline-level block container.
the inside of this block is formatted as block-level box, and the element itself
is formatted as an inline-level box. */
padding-left:3px;
padding-right:3px;
padding-bottom:0px;
margin-bottom:2px;
margin-left:2px;
margin-right:2px;
border:1px solid #6186AF;
text-decoration:none; /* an einai underline, strikethrough, bling to text */
vertical-align:middle;
}
#PageMenus a:hover {
color:#FFFFFF;
background-color:#A0B3DE;
border:1px solid #C8B3F4;
}
#PageMainRegion {
/* width:770px; */
width:1220px;
height:60%;
position:relative;
margin-left:auto;
margin-right:auto;
top: -18px;
}
#PageLeftColumn {
/* width:152px; */
width: 220px;
float:left;
clear:none;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:none;
vertical-align:top;
}
div#LeftMenuSelections, div#LeftMenuSelections p{
line-height:20px;
}
div#LeftMenuSelections a{
display:block;
font-size:14px;
clear:both;
text-decoration:none;
margin:0px;
color:#000000;
padding-left:4px;
padding-right:2px;
padding-top:0px;
padding-bottom:0px;
border:1px solid #CCCCCC;
}
div#LeftMenuSelections a:hover{
text-decoration:none;
border:1px solid #A0A0A0;
background-color:#FBE904;
}
div#LeftMenuSelectionsPlus{
border:1px solid #CCCCCC;
background:url(../images/fon.gif);
position:relative; /* thetei to element se position relative to its normal position,
etsi left:20 prs8etei 20px sto elementsLEFT position */
top:0px; right:0px;bottom:0px;left:0px;
}
#instructions {
display:block;
clear:both;
margin-top:5px;
border:1px solid #CCCCCC;
position:relative;
top:2px; right:0px; bottom:0px; left:0px;
text-align:left;
}
#instructions p{
background:url(../images/fon.gif);
}
#navigatePanel{
position:relative;
top:30px;
border:1px solid #CCCCCC;
margin: 0;
padding:0;
}
#PageCenterColumn {
width:1000px;
height: 100%;
position:relative;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
display:inline-block;
left:0px;
border:thick;
vertical-align:top;
}
#PageRightColumn {
width:180px;
height:100%;
float:right;
top:0px;
right:0px;
clear:right;
display:inline-block;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
vertical-align:top;
overflow:hidden;
}
div#RightMenuSelections, div#RightMenuSelections p{
background:url(../images/fon.gif);
text-align:center;
line-height:18px;
font-size:12px;
}
div#RightMenuSelectionsPlus{
border:1px solid #CCCCCC;
}
div#RightMenuSelections a{
display:block;
clear:both;
text-decoration:none;
margin:0px;
color:#000000;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
border:1px solid #CCCCCC;
}
#mapCanvas{
position:relative;
top:60px;
width: 80%;
left: 10px;
height: 500px;
margin: 0;
border:solid 1px #CCCCCC;
}
#crimeCanvas{
position:relative;
top: 60px;
left: 5px;
width: 80%;
height: 500px;
margin: 0;
padding: 0;
border:solid 1px #CCCCCC;
}
#formLogin{
top:450px;
position:relative;
background-color: #FBE904;
}
@media only screen and (max-device-width: 480px) {
body {
margin:0px;
padding-top:0px;
padding-bottom:0px;
padding-left:5px;
padding-right:5px;
background: #ffffff;
/*
background: #dce9f7 url(../images/body_bg.png) repeat-x 0 top;
background:url(../images/vbox_gradient.png);
*/
width: 100%;
height: 100%;
}
#header{
width:1235px;
}
#PageHeader{
width:1220px;
}
#PageFooter{
width:1220px;
}
}
/* ----------------------- DIVs ---------------------------------- */
问题在于，当我使用rel样式表时，地图不会显示。 当我取消注释样式标记中的内容并删除rel样式表时显示的地图。 有什么建议吗？