Google maps 使用谷歌地图API重新创建标准谷歌地图嵌入

因此，最近对谷歌地图的常规“嵌入”（iframe）代码缺乏可定制性感到有些失望；我已经开始修补谷歌地图API v3。真的，我想做的就是在地图上显示一个企业的标记，这样你就可以点击它并进入mapsgoogle.com上的那个“地方”

因此，我只想重新创建下面的iframe代码的功能。我花了大约一个小时阅读文档，但仅仅是把标记与“地点”关联起来就显得极其复杂

这个地方

标准嵌入

<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时拖延更长的时间。

如果地图不需要交互（除了单击操作），请使用。它只是一个图像，所以你可以将它包装在一个锚定中，精确地指向你想要的地方。

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

---

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

请允许我解释一下实现目标的一种选择。我使用Google Maps API v3提供的marker和infoWindow对象，您可以在我附加在链接中的文档中找到它们。在我创建的JSFIDLE中，您可以自由地进行以下操作：

第一件事是，首先，您希望使用其选项启动映射-我假设您知道以下代码段中的不同变量代表什么：

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对象（）中设置这些选项。 注意：我将地图的中心设置为餐厅的纵横坐标，这是从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>";

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

最后，您需要将标记和信息窗口绑定在一起，这样当用户单击标记时，信息就会弹出。这是通过使用事件侦听器来实现的，您可以侦听标记变量上的“单击”操作。阅读此文档以了解有关谷歌地图事件的信息。同样地，通过API引用查看您可以在对象上侦听的不同事件

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

这应该可以做到，您应该有一个可以替代您包含的iframe的工作选项-除非现在您可以根据自己的需要自定义映射和对其执行的操作。在JSFIDLE中，我还包括了一些样式，只是为了使信息窗口中的东西看起来更漂亮

---

---

现在，我想让你们知道——我相信你们寻找的还有另一个选择——但我还没有用这个API进行实验。这是GooglePlacesAPI，您需要注册它。但从我阅读的文件来看，我认为你可能能够实现你想要做的事情。看看它（），看看有什么好的。

谢谢你的回复。我真的很希望在地图上有红色标记的功能，用户可以点击它来显示带有电话地址和“更多信息”链接的气泡。信息气泡将排除静态地图。哇-我不知道它的存在。这可能就是我想要的。我得稍微修改一下，但除非有人真的让我惊讶，否则你可能会得到他们的分数！你能详细说明一下你的web应用程序的具体功能是什么吗？根据我的理解，我假设你想要一个有标记的地图，其中包括一个信息窗口，该窗口的信息与iframe中的信息相似。我猜如果你点击标题，你希望应用程序打开该位置的实际谷歌地图服务？我明白了，这确实可以通过谷歌地图API实现。您可能需要使用谷歌地图中的其他服务，如地理编码服务。但这些都是你必须尝试的东西，就像你说的，你可以玩玩。我将把一些东西放在一个JSFIDLE中，并在今天的某个时候给您提供一些参考资料。你会发现它是非常可定制的，而且API中总是有一个选项/功能可以满足你的需要。同时，我认为这将是一个伟大的起点：哇，这是一个非常棒和彻底的答案！我想在周末之前我都没有时间完全完成这件事。谢谢你！这确实很奇怪，似乎地图被初始化了两次。如何加载js脚本？从代码来看

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

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