Google地图不会显示，但搜索框会显示。我不知道这段代码有什么问题。我甚至设置了div尺寸，这可能是因为没有出现在屏幕上。我没有附加CSS文件。我的代码如下：
HTML code：
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="header-right">
<img src="logo (1).ico" height="70px" width="70px" alt="Invite Logo">
<img src="logo (2).ico" height="70px" width="70px" alt="Invite Logo">
</div>
</nav>
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<div class="user-img-div">
<img src="user.png" class="img-thumbnail" />
<div class="inner-text">
Khadiza Kobra
</div>
</div>
</li>
<li>
<a href="check-in.html"><i class="fa fa-dashboard "></i>Maps</a>
</li>
<li>
<a href="friends.html"><i class="fa fa-desktop"></i>My Circle</a>
</li>
<li>
<a class="active-menu-top" href="#"><i class="fa fa-yelp "></i>Settings<span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse in">
<li>
<a href="profile.html"><i class="fa fa-coffee"></i>Profile</a>
</li>
<li>
<a href="account settings.html"><i class="fa fa-flash "></i>account settings</a>
</li>
<li>
<a class="active-menu" href="index.html"><i class="fa fa-send "></i>logout</a>
</li>
</ul>
</li>
<li>
<a href="notifications.html"><i class="fa fa-flash "></i>notifications</a>
</li>
<li>
<a href="friends reviews.html"><i class="fa fa-anchor "></i>Friends reviews</a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper" >
<div id="page-inner" >
<div class="row">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 23.685, lng: 90.3563},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
setMarkers(map);
}
var beaches = [
['Dhaka', 23.777176, 90.399452, 4],
['Mirpur 10', 23.8375, 90.3753, 5],
['Shahbag', 23.7381, 90.3954, 3],
['Dhanmondi 5', 23.7459, 90.3852, 2],
['MIST Mirpur', 23.8383, 90.3606, 1]
];
function setMarkers(map) {
var image = {
url: 'map_icon.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBZlGIVcYhTwGPkeeZKj4GgcODjFps8y8U&sensor=true">
</script>
</body>
答案 0 :(得分：0)
尝试为地图div添加维度，例如：
<div id="map" style="width: 400px; height:400px;></div>
答案 1 :(得分：0)
您没有调用initAutocomplete功能。将＆amp; callback = initAutocomplete添加到API的包含中（删除&sensor=true，不再需要）：
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBZlGIVcYhTwGPkeeZKj4GgcODjFps8y8U&callback=initAutocomplete">
或称之为：
google.maps.event.addDomListener(window, "load", initAutocomplete);
代码段
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 23.685,
lng: 90.3563
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
setMarkers(map);
}
var beaches = [
['Dhaka', 23.777176, 90.399452, 4],
['Mirpur 10', 23.8375, 90.3753, 5],
['Shahbag', 23.7381, 90.3954, 3],
['Dhanmondi 5', 23.7459, 90.3852, 2],
['MIST Mirpur', 23.8383, 90.3606, 1]
];
function setMarkers(map) {
var image = {
url: 'map_icon.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 32)
};
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {
lat: beach[1],
lng: beach[2]
},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
google.maps.event.addDomListener(window, "load", initAutocomplete);#map {
height: 400px;
width: 400px;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="wrapper">
<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="header-right">
<img src="logo (1).ico" height="70px" width="70px" alt="Invite Logo">
<img src="logo (2).ico" height="70px" width="70px" alt="Invite Logo">
</div>
</nav>
<nav class="navbar-default navbar-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<div class="user-img-div">
<img src="user.png" class="img-thumbnail" />
<div class="inner-text">
Khadiza Kobra
</div>
</div>
</li>
<li>
<a href="check-in.html"><i class="fa fa-dashboard "></i>Maps</a>
</li>
<li>
<a href="friends.html"><i class="fa fa-desktop"></i>My Circle</a>
</li>
<li>
<a class="active-menu-top" href="#"><i class="fa fa-yelp "></i>Settings<span class="fa arrow"></span></a>
<ul class="nav nav-second-level collapse in">
<li>
<a href="profile.html"><i class="fa fa-coffee"></i>Profile</a>
</li>
<li>
<a href="account settings.html"><i class="fa fa-flash "></i>account settings</a>
</li>
<li>
<a class="active-menu" href="index.html"><i class="fa fa-send "></i>logout</a>
</li>
</ul>
</li>
<li>
<a href="notifications.html"><i class="fa fa-flash "></i>notifications</a>
</li>
<li>
<a href="friends reviews.html"><i class="fa fa-anchor "></i>Friends reviews</a>
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>