Display the google map in jQuery ui dialog

最新推荐文章于 2025-08-16 09:47:15 发布

原创最新推荐文章于 2025-08-16 09:47:15 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#google #dialog #jquery #ui #javascript #callback

Javascript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何解决Google地图无法在jQuery对话框中正确显示的问题。通过调整Google地图API的加载方式，使用回调参数初始化地图，成功实现了地图在对话框中的展示。

Use the default settings, the google map can be displayed in a separate page. But, can't be displayed in the jQuery dialog. After debug in Firebug, i found that the major javascripts are never be loaded, maybe the javascript functions are disabled when ajax load.

Default settings:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>Google Map</title> <mce:script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" mce_src="http://maps.google.com/maps/api/js?sensor=true"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:600px; height:500px;"></div> </body> </html>

I have to change it to use callback method, it works fine when popup the dialog with google maps.

Just add callback parameter to google maps javascript url, like:

<mce:script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize" mce_src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize"></mce:script>

The "initialize" function is used to initialize google map, please refer to the source code of "default settings".