Javascript 谷歌地图不会出现，但搜索框会出现
谷歌地图不会出现，但搜索框会出现。我不知道这个代码有什么问题。我甚至设置了Javascript 谷歌地图不会出现，但搜索框会出现,javascript,html,css,google-maps,Javascript,Html,Css,Google Maps,谷歌地图不会出现，但搜索框会出现。我不知道这个代码有什么问题。我甚至设置了divsize，这可能是不出现在屏幕上的原因。我没有附加CSS文件。我的代码如下： HTML代码： <body> <div id="wrapper"> <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
div<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>
切换导航
-
卡迪扎·科布拉
-
-
-
-
-
-
-
-
函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:23.685，lng:90.3563}，
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var input=document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
var标记=[]；
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
markers.forEach（函数（marker）{
marker.setMap（空）；
});
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
变量图标={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
markers.push（新的google.maps.Marker）({
地图：地图，
图标：图标，
标题：place.name，
位置：place.geometry.location
}));
if（place.geometry.viewport）{
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
});
设置标记（地图）；
}
var海滩=[
[“达卡”，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]
];
函数设置标记（map）{
变量图像={
url:'map_icon.png'，
大小：新谷歌地图大小（20,32），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（0,32）
};
变量形状={
coords:[1,1,1,20,18,20,18,1]，
类型：“poly”
};
对于（变量i=0；i<0.length；i++）{
var beach=海滩[i]；
var marker=new google.maps.marker({
位置：{纬度：海滩[1]，液化天然气：海滩[2]}，
地图：地图，
图标：图像，
形状：形状，
标题：海滩[0]，
zIndex:海滩[3]
});
}
}
<div id="map" style="width: 400px; height:400px;></div>
您没有调用initAutocomplete
函数。将&callback=initAutocomplete添加到API的包含项中（删除&sensor=true
，不再需要）：
代码片段：
函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
拉脱维亚：23.685，
液化天然气：90.3563
},
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var input=document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
var标记=[]；
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
markers.forEach（函数（marker）{
marker.setMap（空）；
});
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
变量图标={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
做记号
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBZlGIVcYhTwGPkeeZKj4GgcODjFps8y8U&callback=initAutocomplete">
google.maps.event.addDomListener(window, "load", initAutocomplete);