Javascript 谷歌地图：如何将其嵌入搜索栏？
嘿，我正在尝试将谷歌地图集成到一个网站中。在特定的地图位置嵌入谷歌地图非常容易，因为您可以通过共享按钮生成嵌入谷歌地图本身的代码，但这会隐藏我游戏所需的搜索栏Javascript 谷歌地图：如何将其嵌入搜索栏？,javascript,html,google-maps,Javascript,Html,Google Maps,嘿，我正在尝试将谷歌地图集成到一个网站中。在特定的地图位置嵌入谷歌地图非常容易，因为您可以通过共享按钮生成嵌入谷歌地图本身的代码，但这会隐藏我游戏所需的搜索栏 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sde!2sde!4v1573800931555!5m2!1sde!2sde" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
有没有办法做到这一点，还是我必须为此付出代价？我目前正在寻找其他地图提供商。如评论中所述，通过简单的iframe嵌入，这可能是不可能的 然而，如果你使用谷歌地图API，有足够的文档可以找到 文档中的一个快速示例：
位置搜索框
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#描述{
字体系列：Roboto；
字体大小：15px；
字体大小：300；
}
#infowindowcontent.title{
字体大小：粗体；
}
#信息窗口内容{
显示：无；
}
#地图#信息窗口内容{
显示：内联；
}
.pac卡{
利润率：10px 10px 0；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
背景色：#fff；
字体系列：Roboto；
}
#pac容器{
垫底：12px；
右边距：12px；
}
.pac控制{
显示：内联块；
填充：5px11px；
}
.pac控制标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：400px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
#头衔{
颜色：#fff；
背景色：#4d90fe；
字体大小：25px；
字号：500；
填充：6px 12px；
}
#目标{
宽度：345px；
}
//本例使用Google Place Autocomplete将搜索框添加到地图中
//特色。人们可以进入地理搜索。搜索框将返回一个
//包含位置和预测搜索词组合的拾取列表。
//此示例需要Places库。包括图书馆=地方
//第一次加载API时的参数。例如：
//
函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:-33.8688，lng:151.2195}，
缩放：13，
mapTypeId:“路线图”
});
//创建搜索框并将其链接到UI元素。
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（功能（地点）{
如果（！place.geometry）{
log（“返回的位置不包含几何图形”）；
返回；
}
变量图标={
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）；
});
}