谷歌地图消失了

时间:2015-10-15 20:10:01

标签: google-maps google-maps-api-3

我是新来的,希望得到我在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>

1 个答案:

答案 0 :(得分:1)

可能是高度问题。要在您的网页上显示谷歌地图,您的地图div必须具有有效高度。如果将高度设置为100%,则其直接父级应具有固定高度(例如800px),但如果直接父级高度也设置为100%,则父级直接父级应具有固定高度(例如500px)和等等等等。

请记住,100%的高度是相对于其父级的,父级本身或其中一个必须具有固定的高度。如果<html>的所有父母都被指定为100%,则它将占据整个窗口,因此它自动具有固定的高度。