google map 信息窗口中调用javascript

   本例是在网页中引用google地图,在地图上加入一个marker,点击marker,弹出一个信息窗口。在信息窗口上有一个文本输入域和一个保存表单的HTML按钮。每个表单输入了一个ID,并有一个按钮的OnClick侦听调用saveData函数。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example: Simple Map</title> <mce:script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg" mce_src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- var marker; function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, "click", function(overlay, latlng) { if (latlng) { marker = new GMarker(latlng, {draggable:true}); GEvent.addListener(marker, "click", function() { var html = "<table>" + "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" + "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"; marker.openInfoWindow(html); }); map.addOverlay(marker); } }); } } function saveData() { var name = escape(document.getElementById("name").value); alert("action-->" + name); } // --></mce:script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 500px; height: 300px"></div> <div id="message"></div> </body> </html>

 

 

代码运行效果如下图:

 

google map 信息窗口中调用javascript_第1张图片

你可能感兴趣的:(JavaScript,html,function,XHTML,Google,button)