ThinkGeo.com    |     Documentation    |     Premium Support

Search Bar for users to Locate Area

How would i incorpoate a Search Box with Ajax intelisence prompts if possible for my users to locate an area.



Could you possibly show me an example in Bing and Google maps, i need to test accuracy and see if it is possible to limit the search results to a specific country.



I have uploaded a screenshot of an example of what i am looking to add to my map program.


screencast.com/t/aP8DEP0B



Dear Gregory, 



Thanks for your post, about the search question, if you want to use the bing map or google map, you need use their javascript API to search. here is some link: 



microsoft.com/maps/developers/web.aspx 

code.google.com/apis/maps/index.html 



Also we have the same product to do the search job named GeoCoder, I can show you a sample to how to work on this if you want. 



Any more questions please feel free to let me know, 



Regards, 



Gary



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()"/>





Gregory, 
  
 Thank you for your post, unfortunately we are not the best resources to answer questions about the Bing Maps API, I believe Micosoft may have a Bing Map developer forum that could help provide some guidance. 
  
 However I do have a question about how you want to implement your search box.  Do you want to use Google or Bings search or do you have your own data that you want to search and locate? 
  
 If you have your own data you may be interested in our Geocoder product as you can write custom plugins to do lookups and searches against your custom database. 
  
 Thanks you, 
  
 Gary

*disapointed*

Gregory, 
  
 Sorry you are disappointed, but this is a forum for questions on how to use Map Suite. 
  
 Any more questions please feel free to tell me. 
  
 Regards, 
  
 Gary