The documentation on how to consume Bing Maps REST services can be found on MSDN here. In our example we will use jquery Ajax to consume service. So here I am display “address” in autocomplete textbox . In order to test this example you need to create bingmap account. here you can generate bing map key .The following library is needed to run this example. You can download these from jquery and jqueryUi
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui-1.10.3.js"></script>//
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
$(document).ready(function () {
$("#address").autocomplete({
source: function (request, response) {
$.ajax({
dataType: "jsonp",
data: {
key:"AnG3h6U87FfaDVcDsAt8VXFYqgaG4yT7YLFWUTYnGa7yQobVd3b4qm1HUvfXE***",//bing map key
q: request.term
},
jsonp: "jsonp",
success: function (data) {
var result = data.resourceSets[0];
if (result) {
if (result.estimatedTotal > 0) {
response($.map(result.resources, function (item) {
return {
data: item,
label: item.name + ' (' + item.address.countryRegion + ')',
value: item.name
}
}));
}
}
}
});
},
minLength: 1
});
});
<input id="address" />
No comments:
Post a Comment