google-maps - 使用 Google Maps API 重新创建嵌入的标准 Google Map

Question

因此，最近对常规谷歌地图“嵌入”(iframe) 代码缺乏可定制性感到有些失望；我已经开始修补 Google Maps API v3。实际上，我只想在 map 上显示一个商家标记，这样您就可以点击它并前往 mapsgoogle.com 上的那个“地点”。

差不多了，我只想重新创建下面 iframe 代码的功能。我花了大约一个小时阅读文档，但仅仅获得与“地点”相关联的标记似乎非常复杂

地点

https://maps.google.com/maps?cid=1311411133662139490

标准嵌入

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?cid=1311411133662139490&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=41.097905,-73.405006&amp;spn=0.006295,0.006295&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?cid=1311411133662139490&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=41.097905,-73.405006&amp;spn=0.006295,0.006295&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

在 api 中似乎没有使用 cid 的功能。

详细说明

一般来说，我只会将其用于小型企业网站。我对常规的 iframe 嵌入和缺乏可定制性感到沮丧。本质上，我想要一个起点，从中我可以玩东西并大量自定义外观/感觉，但无法在与“地点”数据相关联的标记中放置标记 - 允许使用小弹出窗口，等..

老实说，在问这个问题之前我并没有做足够的研究 - 并且有一些误解。 我认为，我可能是错的，API 仍然是我最终想要使用的，但如果我知道 Rick 的回答中的功能，我可能会解决这个问题并拖延更长时间关于学习 gmaps API。

Answer 1

请允许我解释实现您目标的一种选择。我使用 Google Maps API v3 提供的 marker 和 infoWindow 对象，您可以在我附在链接中的文档中找到它们。请随意跟随我创建的 jsFiddle:http://jsfiddle.net/bgvYH/

首先，您想用它的选项启动您的 map - 我假设您知道以下代码片段中的不同变量代表什么:

var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
  var myOptions = {
  zoom: 16,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

如果您想根据自己的喜好自定义您的 map ，请查看您可以在 API 引用中设置的不同选项，您将在 myOptions 对象 (https://developers.google.com/maps/documentation/javascript/reference#MapOptions) 中设置这些选项。 注意:我将 map 的中心设置为餐厅的纬度/经度坐标 - 这是我从您在 iframe ll=41.097905,-73.405006 中提供的 URL 中获取的。

现在您接下来要做的是确定要在信息窗口中显示的内容，因此餐厅信息:

var contentString = "<div id='content'>";
    contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
    contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com‎</a></p></div></div>";

您将来甚至可能最终会从数据库或 JSON 对象中提取此信息，具体取决于您对该项目的深入程度(目前我将其作为静态 HTML)。

接下来我们初始化 infoWindow 对象并将 contentString 设置为 infoWindow 的内容选项。您可以在此处自定义其他选项(就像 map 选项一样，再次查看 InfoWindowOptions 的引用资料:https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions)

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

设置您的 infoWindow 对象后，您可以初始化您的标记对象 - 这会将气泡放置在 map 上。再一次，您在初始化时为标记设置选项，就像您对 map 对象和 infoWindow 对象所做的一样 - 您可以通过查看引用资料进一步根据自己的喜好自定义它(我认为那里甚至有一个选项用于您可以在其中使用自定义图标的标记 - 您可以在此处发挥创意)。

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title:"Mr. Frosty's Deli and Grill"
});

最后，您需要将标记和信息窗口绑定(bind)在一起 - 这样当用户点击标记时，信息就会弹出。这是通过使用事件监听器实现的，您可以监听标记变量上的“单击”操作。阅读本文档以获取有关谷歌地图上事件的信息 https://developers.google.com/maps/documentation/javascript/events .同样地查看 API 引用，了解您可以在一个对象上监听的不同事件。

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

应该这样做，您应该有一个替代您所包含的 iframe 的工作 - 除了现在您可以根据需要自定义 map 和对其执行的操作。在 jsFiddle 中，我还包含了一些样式，只是为了让 infoWindow 内的东西看起来更漂亮。

---

现在，我想让您知道 - 我相信还有另一种选择可以满足您的需求 - 但我还没有试验过这个 API。它是您需要注册的 Google Places API。但是从我阅读文档的内容来看，我认为你可能能够实现你想要做的事情。看看它 ( https://developers.google.com/maps/documentation/places/ )，看看有什么好处。