Hi,
I am trying to make datepicker work inside infowindow (v3), but not successful. To present the problem, I combined a simple map (copied from http://code.google.com/apis/maps/documentation/javascript/examples/infowindow-simple.html) and a simple datepicker example (added the css and js code download + changed the contentString). The datepicker works outside the map. When opening this new demo html, it can be seen a marker inside a map. When the marker is clicked, an infowindow is opened, within which there is a datepicker widget. When the datepicker is clicked, it is supposed to see the datepicking happening. However, when I click the datepicker widget, nothing seems happening. Following is the html code I used (run inside Tomcat): ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <!DOCTYPE html> <html> <head> <meta name=*"viewport"* content=*"initial-scale=1.0, user-scalable=no"* /> <meta http-equiv=*"content-type"* content=*"text/html; charset=UTF-8"*/> <title>*Google* Maps JavaScript API v3 Example: Info Window Simple</title> <link href=* "http://code.google.com/apis/maps/documentation/javascript/examples/default.css"; * rel=*"stylesheet"* type=*"text/css"* /> <script type=*"text/javascript"* src=* "//maps.googleapis.com/maps/api/js?sensor=false"*></script> <link type=*"text/css"* href=* "resources/css/jquery-ui-1.8.17.datepicker.css"* rel=*"stylesheet"* /> <script type=*"text/javascript"* src=*"resources/js/jquery-1.7.1.js"*></ script> <script type=*"text/javascript"* src=* "resources/js/jquery-ui-1.8.17.datepicker.min.js"*></script> <script type=*"text/javascript"*> $(*function*(){ // Datepicker $('#datepicker').datepicker({ inline: *true* }); }); $(':text[name*=date]').live('click',*function*() { $(*this*).datepicker({showOn: 'focus'}).focus(); }); </script> <script type=*"text/javascript"*> *function* initialize() { *var* myLatlng = *new* google.maps.LatLng(-25.363882,131.044922); *var* myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } *var* map = *new* google.maps.Map(document.getElementById("map_canvas"), myOptions); *var* contentString = '<div id="content"><form id="" onsubmit="" action="" method="post"><table><td>Date: <input id="datepicker" type="text"></td></table></form></div>'; *var* infowindow = *new* google.maps.InfoWindow({ content: contentString }); *var* marker = *new* google.maps.Marker({ position: myLatlng, map: map, title: 'Datepicker test' }); google.maps.event.addListener(marker, 'click', *function*() { infowindow.open(map,marker); }); } </script> </head> <div id=*"content"*><form id=*""* onsubmit="" action=*""* method=*"post"*>< table><td>Date: <input id=*"datepicker"* type=*"text"*></td></table></form ></div> <body onload="initialize()"> <div id=*"map_canvas"*></div> </body> </html> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Could anyone help please? Many thanks in advance, Qunhuan -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/blONpoI3awQJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
