Question

我想将Google地图完全嵌入到我的网站中。这意味着在左侧包括搜索栏。

直接在浏览器地址栏上的链接将有效https://www.google.com/maps/search/Automation+Supplies+Limited/@53.4455454,-7.5863638,8z?hl=en-IE，但是当我将其放置在iframe中时，它将无法正常工作。

.linkStyles{
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dotted;
}

谢谢

Answer 1

你不能。

这不是Google提供的。您所能做的就是链接到Google地图。

Answer 2

在您上面提到的google map链接中，将其打开，然后单击菜单栏。选择共享或嵌入地图，您可能会找到网站的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

如果要在网站上显示地图并在左侧放置搜索栏，则可以使用Google Maps Platform's Maps JavaScript API进行此操作。

这是我制作的sample code，它看起来与您想要的实现类似，该实现位于链接图像中。

在此示例中，我使用了 Maps 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 Maps Places API库放置自动完成功能 var autocomplete = new google.maps.places.Autocomplete(input); 作为地图上的搜索机制。

希望这会有所帮助。

如何将Google地图完全嵌入网站

3 个答案: