当用户将鼠标悬停在html文档中的静态图像时，如何显示谷歌地图

Question

我想知道当用户点击图片时在灯箱中显示谷歌地图。

例如： -

<img src="map_icon.png" alt="hover over image to show corresponding map" onclick="run_map_function();" />

我真的很想知道如何做到这一点。任何帮助都感激不尽！三江源。

Answer 1

我不太确定是否可以使用灯箱插件，但是尝试使用JqueryUi对话框，它很容易使用，并且可以在几秒钟内完成设置 看看我的小提琴 http://jsfiddle.net/theodore/trnZS/49/

Answer 2

地图是否需要互动？如果没有，你应该看看使用静态地图api：

https://developers.google.com/maps/documentation/staticmaps/

基本上，您可以使用静态地图api生成要查看的位置的图像，例如：http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false

如果您需要交互式地图，那么我建议您使用iFrame（这意味着要为地图创建单独的页面）。您应该可以轻松地从灯箱中显示iframe。