This is an example of use Google Maps Suggestion, api version 3, in your site using YUI library.
The main problem was about to connect the query of ScriptNodeDataSource with his handler response, infact the callback that google maps returns not allow in his name the square bracket...
To test you can use wget. The first one is how google like callback name:
[dometec@precision2 tmp]$ wget -q -O - "http://www.google.com/maps/suggest?cp=20&hl=it&num=5&q=sapr&callback=callback" && echo
callback&&callback({suggestion:[{query:"Sapri, Italia",interpretation:{term:[{start:0,.......
The second one is how yui's ScriptNodeDataSource object named callback parameter:
[dometec@precision2 tmp]$ wget -q -O - "http://www.google.com/maps/suggest?cp=20&hl=it&num=5&q=sapr&callback=callback[1]" && echo
{suggestion:[{query:"Sapri, Italia",interpretation:{term:[{start:0,end:5,fea.............
In the last call the callback parameter in the response is absent, evaporated! :S
The "patch" is to overwrite the generateRequestCallback of ScriptNodeDataSource object to set an appropriate name and write your own callback function that refresh the AutoComplete widget.
dsScriptNode.generateRequestCallback = function () { return "&callback=callbackGMapsSuggestion"; };
...
callbackGMapsSuggestion = function (queryResult) {
var r = {};
r.results = queryResult.suggestion;
//oAC is the instance of YUI AutoComplete widget
oAC.handleResponse(null, r, null);
};
The complete HTML Test Page
http://dev.zonablog.net/mapsuggestion.html:
<html>
<head>
<title>Google Maps Suggestion with YUI Library Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/logger/assets/skins/sam/logger.css">
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/get/get-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/autocomplete/autocomplete-min.js"></script>
<style type="text/css">
#myAutoComplete {
width: 15em;
padding-bottom: 2em;
}
</style>
<script type="text/javascript">
var dsScriptNode;
var oAC;
function init() {
dsScriptNode = new YAHOO.util.ScriptNodeDataSource("http://www.google.com/maps/suggest?cp=20&hl=it&num=5&&");
dsScriptNode.generateRequestCallback = function () { return "&callback=callbackGMapsSuggestion"; };
dsScriptNode.responseSchema = { fields: ["query"] };
oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", dsScriptNode);
oAC.prehighlightClassName = "yui-ac-prehighlight";
oAC.useShadow = true;
oAC.generateRequest = function (sQuery) { return "q=" + sQuery; };
};
callbackGMapsSuggestion = function (queryResult) {
var r = {};
r.results = queryResult.suggestion;
oAC.handleResponse(null, r, null);
};
YAHOO.util.Event.onDOMReady(init);
</script>
</head>
<body class="yui-skin-sam">
<h1>Google Maps Suggestion with YUI Library Example</h1>
<label for="myInput">Enter a location:</label>
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</div>
</body>
</html>
Enjoy :)
