-1
Я новичок здесь и надеюсь получить помощь в том, что мне не хватает в моем html-файле.Google Map disappeared
У меня есть этот код карты Google, который отлично работает, когда я разместил его на 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>
Что такое "googlemap-api.js" и "script.js"? Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему. – geocodezip
Это проблема css. Ваш dvMap не имеет размера (это 100% от 0) – geocodezip
жаль об этом. У меня есть ссылки на недостающие примеры: http://kemalerkan.com/test/googlemap-api.js, http://kemalerkan.com/test/script.js, Http: // kemalerkan.com/test/bpo-theme.css –