当用户将鼠标悬停在HTML文档中的静态图片上时如何显示Google地图

Question

I would like to know to show a google map in a lightbox when a user clicks on an image.

For Example:-

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

I would really like to know how to do this. Any help will be much appreciated! Thankyou.

Answer 1

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

Answer 2

Does the map need to be interactive? if not, you should look at using the static maps api:

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

Basically, you can use the static maps api to generate an image of the location you want to view, like here: 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

If you need an interactive map, then I suggest using an iFrame (which would mean creating a separate page for the map). You should easily be able to show an iframe from your lightbox.