Question

所以，最近因为缺乏常规谷歌地图“嵌入”（iframe）代码的可定制性而感到有些失望;我已经开始修改Google Maps API v3。实际上，我想要做的就是在地图上显示商家的标记，以便您点击它并转到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提供的标记和infoWindow对象，您可以在我在链接中附加的文档中找到它们。请随意在我创建的jsFiddle中跟随：http://jsfiddle.net/bgvYH/

首先，您要使用其选项启动地图 - 我将假设您知道以下代码段中的不同变量代表什么：

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);

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

现在您要做的是确定要在infoWindow中显示的内容，以便餐厅信息：

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的content选项。您可以在此处自定义其他选项（就像地图选项一样，再次查看InfoWindowOptions的参考：https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions）

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

设置infoWindow对象后，初始化标记对象 - 这会将气泡放在地图上。再一次，你在初始化时设置了标记的选项，就像你使用map对象和infoWindow对象一样 - 你可以通过查看引用进一步自定义它（我认为那里甚至有一个选项）标记，你可以使用自定义图标 - 你可以在这里获得相当的创意。

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

最后，您需要将Marker和infoWindow绑定在一起 - 这样当用户点击标记时，信息会弹出。这是通过使用事件侦听器来实现的，并且您在标记变量上侦听“单击”操作。阅读此文档，了解有关Google地图https://developers.google.com/maps/documentation/javascript/events上事件的信息。同样，请查看API Reference，了解您可以在对象上收听的不同事件。

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

应该这样做，你应该有一个替代你所包含的iframe的替代方案 - 除了现在你可以根据需要自定义地图和你对它执行的操作。在jsFiddle中我还包含了一些样式，只是为了让在infoWindow中看起来很漂亮。

现在，我想告诉您 - 我相信您还有其他选择 - 但我尚未尝试使用此API。这是Google Places API，您已注册。但是从我阅读的文件来看，我认为你可以实现你想做的事情。看看它（https://developers.google.com/maps/documentation/places/），看看有什么好处。

Answer 2

看起来这是通过“我的地方”创建并公开的。如果您不想弄乱API，那么这是您最好的选择。

访问maps.google.com，点击“我的地点”和“创建地图”。自定义并获取嵌入代码。

Answer 3

如果地图不需要互动（超出点击操作），请使用a static map。它只是一个图像，因此您可以将其包装在一个准确指向您想要的位置的锚点中。

使用Google Maps API重新构建标准Google地图

3 个答案: