0

如果我在我的代码中留下 !DOCTYPE html，谷歌地图不起作用？我不能只是删除它，因为我的网站的其余部分都是废话吗？我在谷歌地图上做错了什么？以下是我的审查代码。在有和没有 !DOCTYPE html 的情况下运行它，你会明白我的意思。

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<!-- Title Begins  -->
<title>TEST</title>
<!-- Title Ends -->



<!-- Meta-data Begins -->
<meta name="description" content="">
<meta name="keywords" content="">

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Meta-data Ends -->

<!-- CSS Begins -->
<link href="/css/main.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/skins/menuskin.css" />
<link href="/css/accordiongrey.css" rel="stylesheet" type="text/css" />
<!-- CSS Ends -->

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Scripting Begins -->
<script type="text/javascript" src="/js/jQuery.js"></script>
<script type='text/javascript' src='/js/respond.min.js'></script>
<script type='text/javascript' src='/js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='/js/jquery.dcmegamenu.1.3.3.js'></script>
<script type='text/javascript' src='/js/jquery.cookie.js'></script>
<script type='text/javascript' src='/js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='/js/jquery.dcjqaccordion.2.7.min.js'></script>
<script type='text/javascript' src='/js/jquery.zrssfeed.js'></script>

<script type="text/javascript">

$(document).ready(function() {

// ADD CLASS TO MAIN MEGA MENU NAVIGATION
$(".white > ul").eq(0).addClass("mega-menu").attr("id", "mega-menu-9"); 

// SETUP MEGA MENU
$('#mega-menu-9').dcMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'fade'
});


$(".whiteB > ul").eq(0).addClass("accordion").attr("id", "accordion-2");

$('#accordion-2').dcAccordion({
eventType: 'click',
autoClose: false,
saveState: false,
disableLink: true,
speed: 'fast',
classActive: 'test',
showCount: false
});


var pull        = $('#menu');
                menu        = $('#mainNavAcord');
                menuHeight  = menu.height();

$(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });



    $('#blog').rssfeed('');


});
</script>






<!-- Scripting Ends -->        

</head>
<body>
<div id="wrapper">

<!--start header--> 
<div id="header">

<div id="headMenu" style="float:left; width: 8%; padding: 1%">
<a href="/pages/1/Home"><img src="/images/home.png" alt="Home" class=".iconNav"></a><br>
<img src="/images/menu.png" alt="Menu" class=".iconNav" id="menu"><br>
<a href="" target="_blank"><img src="/images/donate.png" alt="Twitter" class=".iconNav"></a>
</div>

<div id="headLogos" style="float:left;  width: 80%;">
<img src="/images/logo.jpg" alt="Logo" id="Logo">
</div>

<div id="headIcons" style="float:left;  width: 10%; text-align:center;">

<a href="http://www.twitter.com" target="_blank"><img src="/images/twitter.png" alt="Follow On Twitter" class="socials"></a><br>
<a href="http://www.facebook.com"  target="_blank"><img src="/images/facebook.png" alt="Follow On Facebook" class="socials"></a><br>
<a href="http://www.youtube.com"  target="_blank"><img src="/images/youtube.png" alt="Follow On YouTube" class="socials"></a>


</div>


<div style="clear:both"></div>
</div>
<!--end header-->

<div style="clear:both"></div>

<div id="main"><!--start main-->

<div id="columnLeft">

<div id="mainNavAcord"><!--start mainNav-->

</div><!--end mainNav-->

</div>

<div id="columnRight">

<h1>Route Tracker</h1>
<style type="text/css">
      #map-canvas { height: 50%; width: 100% }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFuZxfIaJWtXtKW7V1r-cG7q--EcxsXYo&sensor=false">
    </script>
    <script type="text/javascript">

    var locations = [
      ['toronto', 43.653226,-79.383184, 4]
    ];

      function initialize() {
  var theGirls = new google.maps.LatLng(55.16994,-118.798615);
  var theDonations = new google.maps.LatLng(42.680986, -80.332176);
  var myLatLng = new google.maps.LatLng(56.130366, -106.346771);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var infoWindow = new google.maps.InfoWindow;

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

var locations = [
      ['<p></p>', 53.277963,-110.006145, 1, '/bikes.png'],
      ['<p></p>', 46.803283, -71.242796, 2, '/money.png']
    ];



    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
    var image = locations[i][4];
    //var image = 'bike.png';
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: image,
      });

      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      }







  var flightPlanCoordinates = [
    new google.maps.LatLng(47.560541, -52.712831), // St John's Sydney
    new google.maps.LatLng(46.13679, -60.194224), // To Antigonish
    new google.maps.LatLng(45.622661, -61.992802), // To Charlottetown
    new google.maps.LatLng(46.23824, -63.13107), // To Moncton
    new google.maps.LatLng(47.835957, -69.535985), // To Riverie du loup
    new google.maps.LatLng(46.803283, -71.242796), // To Quebec City
    new google.maps.LatLng(45.50867, -73.553992) ,// To Montreal
    new google.maps.LatLng(45.42153, -75.697193), // To Ottawa
    new google.maps.LatLng(43.653226, -79.383184), // To Toronto
    new google.maps.LatLng(43.250021, -79.866091), // To Hamilton
    new google.maps.LatLng(42.680986, -80.332176), // To Turkey Point
    new google.maps.LatLng(43.434311,-80.477747), // To Kitchener
    new google.maps.LatLng(44.629602,-81.265082), // To Sauble Beach
    new google.maps.LatLng(46.265718,-81.771057), // To Espanola
    new google.maps.LatLng(48.380895,-89.247682), // To Thunder Bay
    new google.maps.LatLng(51.213889,-102.462778), // To Yorkton
    new google.maps.LatLng(52.13437,-106.647656), // To Saskatoon
    new google.maps.LatLng(52.776475,-108.297455), // To North Battlefordd
    new google.maps.LatLng(53.277963,-110.006145), // To North Lloydminster
    new google.maps.LatLng(52.879277,-118.079256), // To North Jasper
    new google.maps.LatLng(53.406541,-117.570033), // To Hinton
    new google.maps.LatLng(55.16994,-118.798615), // To Grande Praire
    new google.maps.LatLng(55.759627,-120.237662), // To Dawson Creek
    new google.maps.LatLng(58.805017,-122.697236), // To Ft Nelson
    new google.maps.LatLng(59.422611,-126.097126), // To Laird River Hot Springs
    new google.maps.LatLng(60.058091,-128.68423), // To Frank Trail
    new google.maps.LatLng(60.087499,-130.606604), // To Rancheria
    new google.maps.LatLng(60.222771,-132.764975), // To Telsin
    new google.maps.LatLng(60.721187,-135.056845), // To Whitehorse
    new google.maps.LatLng(60.754454,-137.511782), // To Hainse Junction
    new google.maps.LatLng(61.252472,-138.800831), // To Destruction
    new google.maps.LatLng(62.385278,-140.893056), // To Beaver Creek






  ];


  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);


}


      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="map-canvas"></div> 
</div>

<div style="clear: both;"></div>



</div><!--end main-->

<div style="clear:both"></div>

<div id="sponsors"><!--start sponsors-->
<hr>
&nbsp;&nbsp;&nbsp;<strong>Our Sponsors</strong><br>
<img src="/images/sponsorPanel.jpg" alt="Sponsor Panel" width="100%"><br><br>
</div>


<div id="footer"><!--start footer-->
<p>Site By <a href="" target="_blank"><img src="" alt="Barber and Veri"></a></p>

</div><!--end footer-->     

</div><!--end wrapper-->

<script>
//jQUERY TO ADD AN ONCLICK FUNCTION FOR TRACKING
// PDF CLICKS ON THE SiTE
$("a[href$='pdf']").each(function(index) {
pdfLabel = $(this).attr('href');
pdfOnClick = "_gaq.push(['_trackEvent', 'PDF', 'Download', '" + pdfLabel + "']);";
$(this).attr("onClick", pdfOnClick);
});
</script>

<script type="text/javascript">
//GOOGLE ANALYTICS CODE
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>
4

1 回答 1

1

将 div "map-canvas" 的高度设置为绝对值（例如 500 像素）会再次显示地图。

    #map-canvas { height: 500px; width: 100% }
于 2013-04-02T15:19:21.720 回答