Bing provides an interesting to alternative to Google maps for integration and if you want to integrate using Jquery. Please copy paste the example in a .html file and test it with a zip-code or city.
The key that I have in the example below will expire in 90 days so please use the below link to create a new key:
http://www.microsoft.com/maps/
Copy the below section after this line in a .html file:
<!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>
<title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-autocomplete-loading
{
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#searchBox
{
width: 25em;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#searchBox").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://dev.virtualearth.net/REST/v1/Locations",
dataType: "jsonp",
data: {
key: "AlJKmxkiJg2u0CIDEyaTM6CWC9jQ_q1pf4_xzxPdEJoaT_KsgKRy73ksHyl24oe5",
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,
change: function (event, ui) {
if (!ui.item)
$("#searchBox").val('');
},
select: function (event, ui) {
displaySelectedItem(ui.item.data);
}
});
});
function displaySelectedItem(item) {
$("#searchResult").empty().append('Result: ' + item.name).append(' (Latitude: ' + item.point.coordinates[0] + ' Longitude: ' + item.point.coordinates[1] + ')');
}
</script>
</head>
<body>
<div>
<div class="ui-widget">
<label for="searchBox">
Search:
</label>
<input id="searchBox" />
</div>
<div id="searchResult" class="ui-widget" style="margin-top: 1em;">
</div>
</div>
</body>
</html>
The key that I have in the example below will expire in 90 days so please use the below link to create a new key:
http://www.microsoft.com/maps/
Copy the below section after this line in a .html file:
<!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>
<title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-autocomplete-loading
{
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#searchBox
{
width: 25em;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#searchBox").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://dev.virtualearth.net/REST/v1/Locations",
dataType: "jsonp",
data: {
key: "AlJKmxkiJg2u0CIDEyaTM6CWC9jQ_q1pf4_xzxPdEJoaT_KsgKRy73ksHyl24oe5",
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,
change: function (event, ui) {
if (!ui.item)
$("#searchBox").val('');
},
select: function (event, ui) {
displaySelectedItem(ui.item.data);
}
});
});
function displaySelectedItem(item) {
$("#searchResult").empty().append('Result: ' + item.name).append(' (Latitude: ' + item.point.coordinates[0] + ' Longitude: ' + item.point.coordinates[1] + ')');
}
</script>
</head>
<body>
<div>
<div class="ui-widget">
<label for="searchBox">
Search:
</label>
<input id="searchBox" />
</div>
<div id="searchResult" class="ui-widget" style="margin-top: 1em;">
</div>
</div>
</body>
</html>
A qualified connected with tech wristwatches has got accomplished a vital factor in the arrival belonging to the hand chronograph in addition to being a particular inventor during this complication replica omega. That solid includes contributed many of the best moments during the conquest through the skies due to the hardy http://www.attrinity.com, trusted and-performance tools. The globe only leading follow trademark towards supply the nation designs by using chronometer-licensed procedures, the best symbol from accurate. But, not just for a observe, in addition unveiled a lot of important retaining wall clocks. You can see several ratings towards the watches. The excess scrolls for any round the clock indices seldom intrude within the pre-occupied face; one additional purple arrow offer grants quick clue for the hometime in no time. This approach surgical procedure therefore does not have any relation to a finely-detailed belonging to the view replica watches uk, none for the results on the chronograph. The ultra-modern see created in this type hails from other individuals, totally intended not to mention generated in the supplier courses. It attributes precisely the same initial architectural mastery as well as a fabulous column tire, your up and down coupling motorola clutch guaranteeing high-precision service, not to mention a modern copyrighted recentering device for that zero-resetting hammers. As soon as utilized with the chronograph, this product permits you towards determine suggest swiftness no matter what point in time elapsed, the space covered and also the particular acceleration gotten to. Typically the observe can be quite solid and its particular save pieces are all around during just about any shop. With regards to another wristwatches, it is possible to get hold of repair and routine program of that chronograph around the world. It is a collectors element in addition to suggestions about the functioning as well as thoughtful modernize exists all over the world. Should you opt to, all the eatches can easily proceed down equally efficiently, this unique bargain The holiday season Item is an effective plan capability to deliver in which prefers watches. However most of these designer watches are generally only identical of the classic trademark units, they are really therefore the exact same in their eyes the fact that possibly even experts are sometimes can not say to them away from each other. The actual Designer watches are actually connected with superior and they are built choosing durable stainless-steel. These also come in a nice-looking black color shade detailed with a wrist watch necklace which usually features crocodile buckskin.
ReplyDeleteI really enjoyed reading.
ReplyDeleteMe gusta mucho tu página en general y este artículo en particular me ha encantado, siento que le dedicas mucho tiempo y que disfrutas lo que haces. mucha suerte!!!
ReplyDeleteEs un blog muy interesante, me ha gustado mucho leerlo, ya que puede ser algo de gran utilidad para poner en práctica.
ReplyDelete