使用标记在 HTML 中嵌入 Google 地图代码

Posted 2023-02-23

【中文标题】使用标记在 HTML 中嵌入 Google 地图代码

【英文标题】：Embed Google Map code in HTML with marker

【发布时间】：2012-05-02 14:30:33

【问题描述】：

我有几个地方的经纬度。我想在谷歌地图中显示它们。没关系，我不能在特定的经纬度位置显示标记。

例如如果我有以下代码，是否可以仅放置一个选项来显示市场，因为所有经纬度坐标都来自数据库并与 php 相呼应

<iframe   frameborder="0" scrolling="no" 
        margin margin 
        src="http://maps.google.mu/?ie=UTF8&amp;ll=-20.234496,57.603722&amp;spn=0.093419,0.169086&amp;t=m&amp;z=13&amp;
        output=embed"></iframe>
        <br />
        <small><a href="http://maps.google.mu/?ie=UTF8&amp;ll=-20.234496,57.603722
                  &amp;spn=0.093419,0.169086&amp;t=m&amp;z=13&amp;source=embed"
               style="color:#0000FF;text-align:left">View Larger Map
               </a>
        </small>

【参考方案1】：

我建议这样，一行 iframe。 根本不需要javascript。 在查询 ?q=,

<iframe src="http://maps.google.com/maps?q=12.927923,77.627108&z=15&output=embed"></iframe>

【讨论】：

&output=embed 不再受支持。

【参考方案2】：

您发布的元素看起来像是从 Google 地图嵌入功能中复制粘贴而来的。

如果您想为您拥有的位置放置标记，您需要编写一些 JavaScript 来执行此操作。我也在学习如何做到这一点。

查看以下内容： https://developers.google.com/maps/documentation/javascript/overlays

它有几个示例和代码示例，可以轻松重复使用并适应您当前的问题。

【参考方案3】：

不需要 javascript 或第三方“工具”，使用这个：

<iframe src="https://www.google.com/maps/embed/v1/place?key=<YOUR API KEY>&q=71.0378379,-110.05995059999998"></iframe>

place 参数提供标记

'q' 参数的格式有几个选项

确保您的 API 中启用了 Google Maps Embed API 和 Static Maps API，否则 google 将阻止请求

更多信息请查看here

【讨论】：

如果您只想使用嵌入（目前免费）并使用数据库中的 long&lat 显示标记，这正是您所需要的 - 完美！

【参考方案4】：

学习 Google 的 JavaScript 库是一个不错的选择。如果您不想进入编码领域，您可能会发现 Maps Engine Lite 很有用。

它是 Google 最近发布的一个工具，您可以在其中创建您的个人地图（创建标记、绘制几何图形以及调整颜色和样式）。

这是我发现的一个有用的教程： Quick Tip: Embedding New Google Maps

【参考方案5】：

使用这个，别忘了从

https://console.developers.google.com/apis/credentials

替换它

    <div id="map" style="width:100%;height:400px;"></div>

<script>
function myMap() 

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var myCenter = new google.maps.LatLng(38.224905, 48.252143);
  var mapCanvas = document.getElementById("map");
  var mapOptions = center: myCenter, zoom: 16;
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker(position:myCenter);
  marker.setMap(map);

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"></script>