I want to use Google Maps Places Autocomplete (like in this sample http://code.google.com/intl/de-DE/apis/maps/documentation/javascript/examples/places-autocomplete.html).
I integrated the Google Maps API by JSNI:
public native void initMap(JavaScriptObject mapOptions, JavaScriptObject bounds, String mapId) /*-{
var mapDiv = $doc.getElementById(mapId);
if (mapDiv==null) {
// alert("Div Tag " + mapId + " not found.");
return;
}
// create the map and fit it within the given bounds
map = new $wnd.google.maps.Map(mapDiv, mapOptions);
if (bounds != null)
{
map.fitBounds(bounds);
}
var defaultBounds = new $wnd.google.maps.LatLngBounds(
new $wnd.google.maps.LatLng(48.0, 11.0),
new $wnd.google.maps.LatLng(48.5, 12.0));
var addressInput = $doc.getElementsByName("address")[0];
if ( addressInput == null )
{
return;
}
var options = {
types: ['geocode']
};
autocomplete = new $wnd.google.maps.places.Autocomplete(addressInput, options);
autocomplete.bindTo('bounds', map);
...
}-*/;
The map is displayed and the bind of the text field works. The placeholder text is displayed in the text field. But autocomplete does not work.
First I used a textItem as address field. This didn't work. I think, the reason is, that this element has the attribute autocomplete="off". I don't find a way to remove this attribute, neither by JavaScript nor by setting the attribute to native or smart (http://forums.smartclient.com/showthread.php?t=12005&highlight=autocomplete).
Then I added an input field to the HTMLFloat, that contains the map:
HTMLFlow mapHTMLFlow = new HTMLFlow ();
mapHTMLFlow.setContents("<input name=\"address\" type=\"text\" size=\"50\" /><div id=\"locationMap\" style=\"height:150\"></div>");
But SmartGWT added again the attribute autocomplete=off to the input field.
The last I tried, was to use a ComboBoxItem. In the ComboBoxItem the usual autocomplete of the browser was displayed but not Google Maps Places Autocomplete.
In Firebug I can see that the API calls for autocomplete are done and that the browser receives autocomplete data:
_xdc_._5hrwsj && _xdc_._5hrwsj( [0,[["Salvatorplatz, München, Deutschland",null,["route","geocode"],"CmRSAAAAGsxXqA1vaIX9YgyzqTYzkulMZxUULIaxongg_2oo9Lm4jBfwxb9xltimWTexNH9n2YT1R54p-zyd-ec4ZdmZOcUY8qV9P7egBKrcHvvUsDE_UL96A-g52YhAZHsbwOiXEhAWjXxZERGrpU76IXTi0At6GhTfQt2Z7F8hLfQq5W996GILlhQodA","a18e186f5a624672bb138110ab3e1dcb8bbb5369",[["Salvatorplatz",0],["München",15],["Deutschland",24]],[[0,3]]],["Salvatorstraße, München, Deutschland",null,["route","geocode"],"CmRUAAAA6dO11aXWyxX-e0kDRnccJcv0SUKI5w4lBNY11jJfJyGX6M4BLs26MUdl9vWAkDNdz8LEy9rQRBxZCJbtTsS0X4d0ormdcgMp1LIOViRYAXuMvfUHbfWeNYKNGJFn1R32EhC9or5CUqfiW65STiOwVVp_GhRiIMBVjoYFTJedtYbQKnrPMxGzaA","c0b52043467778b991ca544f4f35225a68963f60",[["Salvatorstraße",0],["München",16],["Deutschland",25]],[[0,3]]],["Salzburg, Österreich",null,["locality","political","geocode"],"CmRXAAAAvU-XUmCWR6cGpqkWtw3vMXO7OkOWXsDieeN8WuYS53qPG5kHZKO6or36Ltm_zrLjagSuqPKckKFTvpp2W3Z0VAGfXiJ_8_Im_0ygdLs4KnKxHtJ_grAVlarOCp-p_zikEhAautoxkZ6zajm33VbKo5V1GhRw3Kh86PSaG3Sv-jgSZiqv1ctokQ","e029f774120bae38bfae801f445495c799de1980",[["Salzburg",0],["Österreich",10]],[[0,3]]],["Salomon-Idler-Straße, Augsburg, Deutschland",null,["route","geocode"],"CnRuAAAArakdx8bGrOJO4YZ305AUX34bJCh3sI2kpbFnLr4rKVOGsnbycaB3hE9jqgRpKlFrbgXvezKlKfKze5kB7WK5xMB1upQ4QLh0NUHpYC2ecc4V3yxS7QYDOhVO6ISvOGoG-9XK8T7qlNwonPMoSOGV0hIQ-CzLg-vk9ZbI02tcYJQeYxoUiQWR-BOOaevgElnRjBNhZV7QFLw","717748d5b1d24e1c3761e10021d28ec7e5bcbb2c",[["Salomon-Idler-Straße",0],["Augsburg",22],["Deutschland",32]],[[0,3]]],["Salmdorf, Haar, Deutschland",null,["sublocality","political","geocode"],"CmRdAAAAN2pklpAwavGo-XSGCMH5Xp8W8hLPbxjzsUkra8lo4Z49mOt6RCw2Ky0LNykSY1-GONf9Om3SYTPf3zhvsvlWTbFLuP_Lxitzy6LchUwjq1uu9Plhn_Bs9FbrH6zwQgDWEhAwCe6_H2CCgcFj71ixsd-AGhQqeg-VHyLfMMKxDQKeCHxEZpeu7A","5cbfe36ec8958091ef31177bb102c1e59146b2c4",[["Salmdorf",0],["Haar",10],["Deutschland",16]],[[0,3]]]]] )
Has anybody experience on integrating Google Places Autocomplete? Is there a way to prevent that SmartGWT modifies the content of the HTMLFlow? Is there a way to make the field display the autocomplete content?
Thanks
I integrated the Google Maps API by JSNI:
public native void initMap(JavaScriptObject mapOptions, JavaScriptObject bounds, String mapId) /*-{
var mapDiv = $doc.getElementById(mapId);
if (mapDiv==null) {
// alert("Div Tag " + mapId + " not found.");
return;
}
// create the map and fit it within the given bounds
map = new $wnd.google.maps.Map(mapDiv, mapOptions);
if (bounds != null)
{
map.fitBounds(bounds);
}
var defaultBounds = new $wnd.google.maps.LatLngBounds(
new $wnd.google.maps.LatLng(48.0, 11.0),
new $wnd.google.maps.LatLng(48.5, 12.0));
var addressInput = $doc.getElementsByName("address")[0];
if ( addressInput == null )
{
return;
}
var options = {
types: ['geocode']
};
autocomplete = new $wnd.google.maps.places.Autocomplete(addressInput, options);
autocomplete.bindTo('bounds', map);
...
}-*/;
The map is displayed and the bind of the text field works. The placeholder text is displayed in the text field. But autocomplete does not work.
First I used a textItem as address field. This didn't work. I think, the reason is, that this element has the attribute autocomplete="off". I don't find a way to remove this attribute, neither by JavaScript nor by setting the attribute to native or smart (http://forums.smartclient.com/showthread.php?t=12005&highlight=autocomplete).
Then I added an input field to the HTMLFloat, that contains the map:
HTMLFlow mapHTMLFlow = new HTMLFlow ();
mapHTMLFlow.setContents("<input name=\"address\" type=\"text\" size=\"50\" /><div id=\"locationMap\" style=\"height:150\"></div>");
But SmartGWT added again the attribute autocomplete=off to the input field.
The last I tried, was to use a ComboBoxItem. In the ComboBoxItem the usual autocomplete of the browser was displayed but not Google Maps Places Autocomplete.
In Firebug I can see that the API calls for autocomplete are done and that the browser receives autocomplete data:
_xdc_._5hrwsj && _xdc_._5hrwsj( [0,[["Salvatorplatz, München, Deutschland",null,["route","geocode"],"CmRSAAAAGsxXqA1vaIX9YgyzqTYzkulMZxUULIaxongg_2oo9Lm4jBfwxb9xltimWTexNH9n2YT1R54p-zyd-ec4ZdmZOcUY8qV9P7egBKrcHvvUsDE_UL96A-g52YhAZHsbwOiXEhAWjXxZERGrpU76IXTi0At6GhTfQt2Z7F8hLfQq5W996GILlhQodA","a18e186f5a624672bb138110ab3e1dcb8bbb5369",[["Salvatorplatz",0],["München",15],["Deutschland",24]],[[0,3]]],["Salvatorstraße, München, Deutschland",null,["route","geocode"],"CmRUAAAA6dO11aXWyxX-e0kDRnccJcv0SUKI5w4lBNY11jJfJyGX6M4BLs26MUdl9vWAkDNdz8LEy9rQRBxZCJbtTsS0X4d0ormdcgMp1LIOViRYAXuMvfUHbfWeNYKNGJFn1R32EhC9or5CUqfiW65STiOwVVp_GhRiIMBVjoYFTJedtYbQKnrPMxGzaA","c0b52043467778b991ca544f4f35225a68963f60",[["Salvatorstraße",0],["München",16],["Deutschland",25]],[[0,3]]],["Salzburg, Österreich",null,["locality","political","geocode"],"CmRXAAAAvU-XUmCWR6cGpqkWtw3vMXO7OkOWXsDieeN8WuYS53qPG5kHZKO6or36Ltm_zrLjagSuqPKckKFTvpp2W3Z0VAGfXiJ_8_Im_0ygdLs4KnKxHtJ_grAVlarOCp-p_zikEhAautoxkZ6zajm33VbKo5V1GhRw3Kh86PSaG3Sv-jgSZiqv1ctokQ","e029f774120bae38bfae801f445495c799de1980",[["Salzburg",0],["Österreich",10]],[[0,3]]],["Salomon-Idler-Straße, Augsburg, Deutschland",null,["route","geocode"],"CnRuAAAArakdx8bGrOJO4YZ305AUX34bJCh3sI2kpbFnLr4rKVOGsnbycaB3hE9jqgRpKlFrbgXvezKlKfKze5kB7WK5xMB1upQ4QLh0NUHpYC2ecc4V3yxS7QYDOhVO6ISvOGoG-9XK8T7qlNwonPMoSOGV0hIQ-CzLg-vk9ZbI02tcYJQeYxoUiQWR-BOOaevgElnRjBNhZV7QFLw","717748d5b1d24e1c3761e10021d28ec7e5bcbb2c",[["Salomon-Idler-Straße",0],["Augsburg",22],["Deutschland",32]],[[0,3]]],["Salmdorf, Haar, Deutschland",null,["sublocality","political","geocode"],"CmRdAAAAN2pklpAwavGo-XSGCMH5Xp8W8hLPbxjzsUkra8lo4Z49mOt6RCw2Ky0LNykSY1-GONf9Om3SYTPf3zhvsvlWTbFLuP_Lxitzy6LchUwjq1uu9Plhn_Bs9FbrH6zwQgDWEhAwCe6_H2CCgcFj71ixsd-AGhQqeg-VHyLfMMKxDQKeCHxEZpeu7A","5cbfe36ec8958091ef31177bb102c1e59146b2c4",[["Salmdorf",0],["Haar",10],["Deutschland",16]],[[0,3]]]]] )
Has anybody experience on integrating Google Places Autocomplete? Is there a way to prevent that SmartGWT modifies the content of the HTMLFlow? Is there a way to make the field display the autocomplete content?
Thanks
Comment