Hello, i downloaded a SDK PDF file, and extracted the following code samples.
I am unsure how to link it into the map item. Please assist. i am quite lost.
Initialize the Map Initialize the Map Initialize the Map Initialize the Map Initialize the Map Initialize the Map
Before you add geocoding functionality, initialize the map using the following code.
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId:"r"});
}
</script>
<body onload="GetMap();">
Add Controls
For this sample, add a text box and a Geocode button. In your script, create a ClickGeocode function that is called when the button is clicked.
<input type="button" value="Geocode" onclick="ClickGeocode()"/>
Since the Bing Maps REST Services also require a Bing Maps Key, you need to first retrieve the key from the map object to ensure the session is valid. Use the getCredentials method of the Map Class to do this. The getCredentials method takes a function to call when the credentials are retrieved.
function ClickGeocode(credentials)
{
map.getCredentials(MakeGeocodeRequest);
}
Make a Ge Make a Ge Make a Ge Make a Geocode REST Request ocode REST Request ocode REST Request ocode REST Request ocode REST Request ocode REST Request
Next, make a geocode request to the Bing Maps REST Services using the value in the txtQuery input box and the credentials.
The Bing Maps REST Services can return an XML or JSON response object. For JavaScript code, JSON is more appropriate, so set output=JSON. This means that you need to also set a jsonp callback function name. In this sample the callback function is named GeocodeCallback. Finally, since you do not know if the text provided is a place name or an address, supply the locationQuery parameter and set it to the value of the txtQuery text box. Your REST geocode request looks like this:
var geocodeRequest = "dev.virtualearth.net/REST/v1/Locations/" + document.getElementById('txtQuery').value + "?output=json&jsonp=GeocodeCallback&key=" + credentials;
Now add script to make the REST request.
function MakeGeocodeRequest(credentials)
{
var geocodeRequest = "dev.virtualearth.net/REST/v1/Locations/" + document.getElementById('txtQuery').value + "?output=json&jsonp=GeocodeCallback&key=" + credentials;
CallRestService(geocodeRequest);
}
function CallRestService(request)
{
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
function GeocodeCallback(result)
{
// Do something with the result
}
Display the Results Display the ResultsDisplay the Results Display the Results Display the Results
Finally, add code to the GeocodeCallback function to set the map view to the found location and add a pushpin at that location. The final code is shown below.
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
// Initialize the map
30
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Your Bing Maps Key", mapTypeId:"r"});
}
function ClickGeocode(credentials)
{
map.getCredentials(MakeGeocodeRequest);
}
function MakeGeocodeRequest(credentials)
{
var geocodeRequest = "dev.virtualearth.net/REST/v1/Locations/" + document.getElementById('txtQuery').value + "?output=json&jsonp=GeocodeCallback&key=" + credentials;
CallRestService(geocodeRequest);
}
function GeocodeCallback(result)
{
alert("Found location: " + result.resourceSets[0].resources[0].name);
if (result &&
result.resourceSets &&
result.resourceSets.length > 0 &&
result.resourceSets[0].resources &&
result.resourceSets[0].resources.length > 0)
{
// Set the map view using the returned bounding box
var bbox = result.resourceSets[0].resources[0].bbox;
var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
map.setView({ bounds: viewBoundaries});
// Add a pushpin at the found location
var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
var pushpin = new Microsoft.Maps.Pushpin(location);
map.entities.push(pushpin);
}
}
function CallRestService(request)
{
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
</script>
<body onload="GetMap();">
<input type="button" value="Geocode" onclick="ClickGeocode()"/>