Javascript 设置谷歌地图的位置和摆脱框

我试图解决两个问题。我可以单独解决每个问题，但不能同时解决

我想要 1.在我的网站上有一个谷歌地图，当页面加载时已经加载了一个特定的位置，也就是红色箭头 2.要清除左上角的灰色框

获取位置很容易。您只需使用iframe。我是这样做的：

<div style="border-radius: 250px; width: 500px; overflow: hidden; margin-top: 90px; margin-bottom: 90px;">
    <iframe id="map" width="500" height="500" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw&key=MYAPIKEY" allowfullscreen></iframe>
</div>

但是iframe在左上角有一个小盒子。我不想那样，我需要它消失

所以我尝试使用谷歌地图API。使用JavaScript，我可以像这样移除框：

<div id="map_container" >
    <div id="map"></div>
</div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: -33, lng: 151},
      disableDefaultUI: true
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：{lat:-33，lng:151}，
disableDefaultUI:true
});
}

---

这个很好用，只是我似乎不能设置相同的红色箭头。这是一个商业场所，所以我不能只设置lat和lng。我需要一支红色的箭，直接指向业务。关于堆栈溢出，我似乎找不到这两个问题的答案。救命啊

如果您想使用Javascript API，您需要首先使用Places API查找您的企业的Place ID的坐标，然后将其传递到地图中

在这页的中间部分查看示例

但是，如果您只想隐藏信息框，则可以在“查看”模式下使用“嵌入”：

<iframe src="https://www.google.com/maps/embed/v1/view?key=[your key]&q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw" />

文档中描述了各种嵌入模式

---

据我所知，你不能同时保留红色箭头和摆脱灰色方框。但是你可以用CSS来做。在我的例子中，我希望我的地图是一个圆。所以我把地图放在一个圆形容器中，容器上设置了overflow:hidden。然后，我对iframe的宽度和高度进行了170%的调整，这将框推到了视图之外。然后，只需使用相对定位将箭头推回地图中心即可。我是这样做的

<div id="map_container">
    <iframe id="map" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJm04kiUOHj4AR8NnaLQ2OCXw&key=[MYAPIKEY]" allowfullscreen>
    </iframe>
</div>


#map {
width: 170%;
height: 170%;
position:relative;
top: -120px;
left: -120px;
}
#map_container {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
width: 350px;
height: 350px;
overflow: hidden; 
margin-top: 90px; 
margin-bottom: 90px;
border-radius: 250px;
}

#地图{
宽度：170%；
身高：170%；
位置：相对位置；
顶部：-120px；
左：-120px；
}
#映射容器{
-webkit掩码图像：url（数据：image/png；base64，ivborw0kgoaaaansuhueugaaaaaaaabcaiaacqd1peaaagxrfwhrtb2z0d2fyzqbbzg9izbwfnzvjlywr5ccllpaaaa5jrefuenpiygbgaagaagwaaaaaaaaaaaaaabcaiaacqd1peaaagxrfwhrtb2z0d2fyzqbbzg9izbwfwfnzvjlywcllpaaaa5j；
宽度：350px；
高度：350px；
溢出：隐藏；
边缘顶部：90像素；
边缘底部：90像素；
边界半径：250px；
}

---

webkit位用于防止全尺寸地图在边缘周围闪烁。显然，您仍然需要插入一个有效的API密钥才能使其正常工作

我只想把盒子藏起来。我尝试了您在这里所做的，并在控制台中得到“加载资源失败：服务器响应状态为400（）”。使用这个，我可以得到我的位置。我该如何编辑这个精确的代码来摆脱这个框？非常感谢。可能重复的