Display the google map in jQuery ui dialog-CSDN博客

本文链接：https://blog.csdn.net/stefli/article/details/6577378

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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".