如何将谷歌地图完全嵌入网站

Question

我想把谷歌地图完全嵌入我的网站。意思是包括左边的搜索栏。

谷歌地图

直接在浏览器地址栏上的链接将起作用https://www.google.com/maps/search/Automation+Supplies+Limited/@53.44555454，-7.5863638,8z？hl=en-IE但是当我把它放在iframe中时，它不起作用。

<iframe src="https://www.google.com/maps/search/Automation+Supplies+Limited/@53.4455454,-7.5863638,8z?hl=en-IE"></iframe>

感谢

Answer 1

你不能。

这不是谷歌提供的。你所能做的就是链接到谷歌地图。

Answer 2

在上面提到的谷歌地图链接中，打开它并单击菜单栏。选择共享或嵌入地图，您可能会找到网站的html代码。以下是您的地图示例：<iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d1212742.5438103776!2d-8.069837255079928!3d53.59579689997422!3m2!1i1024!2i768!4f13.1!2m1!1sAutomation%20Supplies%20Limited!5e0!3m2!1sen!2s!4v1573529617789!5m2!1sen!2s" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>。

Answer 3

如果您想在网站中显示地图并在左侧放置搜索栏，您可以使用谷歌地图平台的Maps JavaScript API来完成此操作。

这是我制作的一个示例代码，看起来与您想要的实现类似，该实现位于链接中的图像中。

在本例中，我使用地图JavaScript API来显示地图

var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.467079, lng: -6.719628},
zoom: 8,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
});

并使用Google地图地点API库来放置自动完成var autocomplete = new google.maps.places.Autocomplete(input);作为地图上的搜索机制。

希望这能有所帮助。