2015-10-15 81 views
-1

我是新來的,希望得到我在我的HTML文件中缺少的幫助。谷歌地圖消失

我有這個谷歌地圖代碼,當我把它放在我的模擬設計的wix上時,它工作得很好。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var markers = [ 
    { 
     "title": 'Bancroft Medical Center', 
     "lat": '39.755597', 
     "lng": '-75.570262', 
     "description": '<b>Brandywine Podiatry</b><br>Bancroft Medical Center<br> 1010 North Bancroft Parkway<br> Wilmington, DE 19805<br>(302) 658-1129' 
    }, 
    { 
     "title": 'Silverside Professional Center', 
     "lat": '39.8010954', 
     "lng": '-75.5038161', 
     "description": '<b>Brandywine Podiatry</b><br>2106 Silverside Road<br> Wilmington, DE 19810<br>(302) 478-8099' 
    }, 
    { 
     "title": 'Becks Woods Plaza', 
     "lat": '39.616351', 
     "lng": '-75.699592', 
     "description": '<b>Brandywine Podiatry</b><br>Becks Woods Plaza<br>121 Becks Woods Drive<br> Bear, DE 19701<br> (302) 595-4077' 
    }, 
    { 
     "title": 'Omega Professional Center', 
     "lat": '39.6920102', 
     "lng": '-75.6771784', 
     "description": '<b>Brandywine Podiatry</b><br>Omega Professional Center<br>B-89 Omega Drive<br> Newark, DE 19713<br>(302) 595-4077' 
    }, 
     { 
     "title": 'Ketlay Plaza', 
     "lat": '39.452119', 
     "lng": '-75.729465', 
     "description": '<b>Brandywine Podiatry</b><br>Ketlay Plaza<br>114 Sandhill Drive<br> Middletown, DE 19709 <br>(302) 595-4077' 
    }, 
    { 
     "title": 'Glasgow Professional Center', 
     "lat": '39.5993024', 
     "lng": '-75.7448504', 
     "description": '<b>Brandywine Podiatry</b><br>Glasgow Professional Center<br>2600 Glasgow Ave.<br> Newark, DE 19702<br> (302) 595-4077' 
    } 
    ]; 
    window.onload = function() { 
     LoadMap(); 
    } 
    function LoadMap() { 
     var mapOptions = { 
      center: new google.maps.LatLng(39.6057218,-75.5820083), 
      zoom: 9, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 

     //Create and open InfoWindow. 
     var infoWindow = new google.maps.InfoWindow(); 

     for (var i = 0; i < markers.length; i++) { 
      var data = markers[i]; 
      var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: data.title 
      }); 

      //Attach click event to the marker. 
      (function (marker, data) { 
       google.maps.event.addListener(marker, "click", function (e) { 
        //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow. 
        infoWindow.setContent("<div style = 'width:100%;min-height:100%'>" + data.description + "</div>"); 
        infoWindow.open(map, marker); 
       }); 
      })(marker, data); 
     } 
    } 
</script> 
<div id="dvMap" style="width:100%;min-height:100%"> 
</div> 

既然我正在構建網站並將其應用到我的html文件中,那麼地圖就會消失。

=====

以下是我的HTML文件。

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="bpo-theme.css" rel="stylesheet" type="text/css"> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,800,900' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'> 
<title>BPO</title> 

<!--MENU--> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script src="script.js"></script> 
<link rel="stylesheet" href="styles.css"> 
<!--MAPS--> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="googlemap-api.js"></script> 
</head> 

<body> 
<div id='cssmenu'> 
<ul> 
    <li><a href='#'>Home</a></li> 
    <li><a href='#'>For Patients</a></li> 
    <li><a href='#'>Our Doctors</a></li> 
    <li><a href='#'>Foot & Ankle Conditions</a></li> 
    <li><a href='#'>Forms</a></li> 
    <li><a href='#'>Contact</a></li> 
</ul> 
</div> 


<div style="background-image:url(images/Bancroft.jpg); background-size:cover; height:500px; text-align:center; color:#ffffff;"> 
<br><h1>Welcome to Delaware's Premiere Foot & Ankle Center</h1> 
<div class="section group"> 
    <div class="col span_1_of_3"> 
    <div class="pad white"><h4>FOOT & ANKLE</h4>TYPES OF CONDITIONS 
    </div> 
    </div> 
    <div class="col span_1_of_3"> 
    <div class="pad white"> 
    <h4>FOR PATIENTS</h4>NEW & CURRENT 
    </div> 
    </div> 
    <div class="col span_1_of_3"> 
    <div class="pad white"> 
    <h4>PATIENT FAQS</h4>FOR YOUR VISIT 
    </div> 
    </div> 
</div> 
</div> 


<div class="section group"> 
    <div class="col2 span_1_of_2"> 
     <div style="padding:10%;"> 
      <h4 class="grayheadr">OFFICE LOCATION</h4><br> 
<!--Bancroft--> 
<h5>Bancroft Medical Center</h5> 
1010 North Bancroft Parkway,<br> 
Wilmington, DE 19805 <br> 
<h5>(302) 658-1129</h5><br> 
M: 8am-4:30pm<br> 
T: 8am-6pm<br> 
W: 8am-5pm<br> 
T: 8am-4:30pm<br> 
F: 8am-1:30pm 

<hr class="solid"> 
<!--Silverside--> 
<h5>2106 Silverside Professional Center</h5> 
2106 Silverside Rd.<br> 
Wilmington, DE 19810<br> 
<h5>(302) 478-8099</h5><br> 
Monday: 8am-4:30pm<br> 
Tuesday: 8am-6pm<br> 
Wednesday: 8am-4:30pm<br> 
Thursday: 8am-4:30pm<br> 
Friday: 8am-4pm<br> 
<hr class="solid"> 
<!--Becks Woods--> 
<h5>Becks Woods Plaza</h5> 
121 Becks Woods Dr.<br> 
Bear, DE 19701<br> 
<h5>(302) 595-4077</h5><br> 
Monday: 8am-4:30pm<br> 
Tuesday: 8am-6pm<br> 
Wednesday: 8am-6pm<br> 
Thursday: 8am-4:30pm<br> 
Friday: 8am-1:30pm<br> 
<hr class="solid"> 
<!--Omega--> 
<h5>Omega Professional Center</h5> 
B-89 Omega Drive<br> 
Newark, DE 19713<br> 
<h5>(302) 595-4077</h5><br> 
Monday: 12:30pm-5:30pm 
<hr class="solid"> 
<!--Ketlay--> 
<h5>Ketlay Plaza</h5> 
114 Sandhill Drive<br> 
Middletown, DE 19709<br> 
<h5>(302) 595-4077</h5><br> 
Thursday: 8am-5:30pm 
<hr class="solid"> 
<!--Glasgow--> 
<h5>Glasgow Professional Center</h5> 
2600 Glasgow Ave.<br> 
Newark, DE 19702<br> 
<h5>(302) 595-4077</h5><br> 
Wednesday: 8:00am-10:30pm 
<!--locations end--> 
     </div> 
    </div> 
<div class="col2 span_1_of_2"> 
    <div class="pad"> 
<div id="dvMap" style="width:100%;min-height:100%"></div> 
<br> 
<h4 class="grayheadr">ABOUT US</h4><br><br> 

At Brandywine Podiatry, we understand that successful treatment takes into consideration the elements of comfort, aesthetics and functionality -we strive to provide solutions that address each of these elements to achieve the optimal health of each of our patients.<br><br> 
Please call one of our office near you to schedule your initial, new patient consultation today and let Brandywine Podiatry help get you back on your feet again. <a href="">more »</a><br><br> 
    </div> 
</div> 

</body> 
</html> 
+0

什麼是「googlemap-api.js」和「script.js」?請提供證明此問題的[最小,完整,測試和可讀示例](http://stackoverflow.com/help/mcve)。 – geocodezip

+0

這是一個CSS問題。您的dvMap沒有尺寸(這是0的100%) – geocodezip

+0

抱歉。我有失蹤的實例鏈接: http://kemalerkan.com/test/googlemap-api.js, http://kemalerkan.com/test/script.js, HTTP:// kemalerkan.com/test/bpo-theme.css –

回答

1

這可能是高度問題。要在您的頁面上顯示Google地圖,您的地圖div必須具有有效的高度。如果將高度設置爲100%,則其直接父級應該具有固定高度(例如800px),但是如果直接父級高度也設置爲100%,則父級的直接父級應該具有固定高度(例如500px)和等等等等。

請記住,100%的高度是相對於其父母,父母本身或其中一個超級必須有一個固定的高度。如果<html>的所有父母都被指定爲100%,那麼它將佔據整個窗口,因此它自動具有固定的高度。

+0

我很高興你指出。上週它變得令人沮喪,甚至沒有觸及到這一點。我在px中設置了高度,並且做到了這一點。謝謝! –

+0

歡迎您,如果有幫助,您應該將其標記爲答案,以便其他人可以從此問題中受益。 –