Search
While there is no search module in the API, you may take advantage of all the search features by calling the Search API Web Service directly. This will enable you to search and display data from MapQuest's hosted data or your own custom data tables.
To learn more about shape collections used to display the POI results, see the Collections page. If you're interested in further customizing the POIs, see the POIs and InfoWindows page.
Below are several samples using jQuery to make service calls.
Radius Search Using Custom Data
The following example makes an Ajax request to the Search API Web Service and does a radius search of your own hosted data table managed through the MapQuest Data Manager. The map is then initialized with the shape collection.
For additional details and parameters that are unique to a Radius Search, please refer to the Radius Search Developer's Guide.
A complete list of available icons, including numbered icons, are available on the Static Map Standard Icons page.
$.ajax({
url: 'http://www.mapquestapi.com/search/v1/radius',
dataType: 'jsonp',
crossDomain: true,
data: {
key: decodeURIComponent(key),
origin: 'Denver, CO', /*origin of the radius search*/
radius: 2, /*radius of search in miles*/
hostedData: 'MQA.MQ_90651_BEV' /*your own custom hosted data table*/
},
success: function(data, textStatus, jqXHR) {
var pois = new MQA.ShapeCollection();
var html = '<table width="700px;"><thead><tr><th>ID</th><th>NAME</th><th>ADDRESS</th><th>ZIP</th><th>DISTANCE (miles)</th></tr>';
/*Add POI markers and populate the search result table*/
for (i=0;i<data.searchResults.length;i++) {
var location = new MQA.Poi({lat:data.searchResults[i].shapePoints[0],lng:data.searchResults[i].shapePoints[1]});
/*Change default POI icons to numbered icons*/
var numberedPoi = new MQA.Icon('http://www.mapquestapi.com/staticmap/geticon?uri=poi-' + (i+1) + '.png',20,29);
location.setIcon(numberedPoi);
/*Populate the content within the InfoWindows*/
location.setRolloverContent('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].name + '</div>');
location.setInfoContentHTML('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].name + '</div>' + data.searchResults[i].fields.address + '<br />' + data.searchResults[i].fields.city + ', CO ' + data.searchResults[i].fields.postal);
pois.add(location);
html += '<tr><td>' + data.searchResults[i].resultNumber + '</td><td>' + data.searchResults[i].name + '</td><td>' + data.searchResults[i].fields.address + '</td><td>' + data.searchResults[i].fields.postal + '</td><td>' + data.searchResults[i].distance + '</td></tr>';
}
html += '</table>';
document.getElementById('searchResults').innerHTML = html;
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
collection:pois /*initialize map with shape collection*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom', 'viewoptions', 'traffictoggle', 'mousewheel', 'shapes', function() {
map.addControl(new MQA.LargeZoom(), new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5)));
map.addControl(new MQA.TrafficToggle());
map.addControl(new MQA.ViewOptions());
map.enableMouseWheelZoom();
});
}
});
Search by Drive Distance
The following example searches for museums closest to downtown Denver based on their driving distance and adds the shape collection after the map has been initialized. The hostedData being searched is MQA.NTPois (North American NAVTEQ POI Locations), a freely accessible POI table for anyone with a MapQuest Developer Account. The various POI categories included in the database are listed here.
Additional unit types such as driving minutes and walking minutes are detailed in the Driving/Walking Time Search section.
Note: If no hostedData is specified, the table searched will automatically default to MQA.NTPois.
$.ajax({
url: 'http://www.mapquestapi.com/search/v1/search',
dataType: 'jsonp',
crossDomain: true,
data: {
key: decodeURIComponent(key),
shapePoints: '39.740115,-104.984898', /*center point of the search*/
hostedData: 'MQA.NTPois,T=3021', /*data table and POI category to be searched*/
units: 'dm', /*unit type (dm=driving miles)*/
maxMatches: 10 /*maximum number of returned results*/
},
success: function(data, textStatus, jqXHR) {
var pois = new MQA.ShapeCollection();
var html = '<table width="700px;"><thead><tr><th>ID</th><th>NAME</th><th>ADDRESS</th><th>ZIP</th><th>DRIVE MILES</th></tr>';
/*Add POI markers and populate the search result table*/
for (i=0;i<data.searchResults.length;i++) {
var location = new MQA.Poi({lat:data.searchResults[i].shapePoints[0],lng:data.searchResults[i].shapePoints[1]});
/*Change default POI icons to numbered icons*/
var numberedPoi = new MQA.Icon('http://www.mapquestapi.com/staticmap/geticon?uri=poi-' + (i+1) + '.png',20,29);
location.setIcon(numberedPoi);
/*Populate the content within the InfoWindows*/
location.setRolloverContent('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].name + '</div>');
location.setInfoContentHTML('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].name + '</div>' + data.searchResults[i].fields.Address + '<br />' + data.searchResults[i].fields.City + ', ' + data.searchResults[i].fields.State + data.searchResults[i].fields.ZIP);
pois.add(location);
html += '<tr><td>' + data.searchResults[i].resultNumber + '</td><td>' + data.searchResults[i].name + '</td><td>' + data.searchResults[i].fields.Address + '</td><td>' + data.searchResults[i].fields.ZIP + '</td><td>' + data.searchResults[i].distance + '</td></tr>';
}
html += '</table>';
document.getElementById('driveResults').innerHTML = html;
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:13, /*initial zoom level of the map*/
latLng:{lat:39.740115, lng:-104.984898}, /*center of map in latitude/longitude */
mtype:'map' /*map type (map)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('largezoom', 'viewoptions', 'traffictoggle', 'mousewheel', 'shapes', function() {
map.addControl(new MQA.LargeZoom(), new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5)));
map.addControl(new MQA.TrafficToggle());
map.addControl(new MQA.ViewOptions());
map.enableMouseWheelZoom();
map.addShapeCollection(pois);
map.bestFit();
});
}
});
Corridor Search Using the Directions API
Nothing is stopping you from making multiple service calls. In the following example, we make a request to the Directions API Web Service using JSON and run a corridor search for nearby hotels using the route's Session ID. The Session ID acts as a unique identifier which stores the route as you execute your search.
Additional methods and search parameters are described in the Corridor Search Developer's Guide.
Similar to the previous example, we search for hotels using the MQA.NTPois database where millions of POIs are defined by category and made readily available.
Note: If no hostedData is specified, the table searched will automatically default to MQA.NTPois.
$('#getRoute').submit(function(event) {
var from = document.getElementById('fromLoc').value;
var to = document.getElementById('toLoc').value;
/*Call the Directions API Web Service using JSON*/
$.ajax({
url: 'http://www.mapquestapi.com/directions/v1/route',
dataType: 'jsonp',
crossDomain: true,
data: {
key: decodeURIComponent(key),
from: from,
to: to
},
success: function(data, textStatus, jqXHR) {
/*Remove all routes and shapes currently on the map and display the new route request*/
map.removeAllShapes();
map.addRoute([
{latLng:{lat:data.route.locations[0].latLng.lat,lng:data.route.locations[0].latLng.lng}},
{latLng:{lat:data.route.locations[1].latLng.lat,lng:data.route.locations[1].latLng.lng}}
]);
/*Call the Search API Web Service and execute a search along the route using its Session ID*/
$.ajax({
url: 'http://www.mapquestapi.com/search/v1/corridor',
dataType: 'jsonp',
crossDomain: true,
data: {
key: decodeURIComponent(key),
sessionId: data.route.sessionId, /*unique identifier used to store a route*/
width: 0.5, /*width of how far away from the corridor to search*/
hostedData: 'MQA.NTPois,T=3021', /*data table and POI category to be searched*/
maxMatches: 20 /*maximum number of returned results*/
},
success: function(data, textStatus, jqXHR) {
var pois = new MQA.ShapeCollection();
var html = '<table width="700px;"><thead><tr><th>ID</th><th>NAME</th><th>ADDRESS</th><th>ZIP</th><th>DRIVE MINUTES</th></tr>';
/*Add POI markers and populate the search result table*/
for (i=0;i<data.searchResults.length;i++) {
var location = new MQA.Poi({lat:data.searchResults[i].shapePoints[0],lng:data.searchResults[i].shapePoints[1]});
/*Change default POI icons to numbered icons*/
var numberedPoi = new MQA.Icon('http://www.mapquestapi.com/staticmap/geticon?uri=poi-' + (i+1) + '.png',20,29);
location.setIcon(numberedPoi);
/*Populate the content within the InfoWindows*/
location.setRolloverContent('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].name + '</div>');
location.setInfoContentHTML('<div style="width:200px; font:bold 14px Helvetica, Arial, sans-serif;">' + data.searchResults[i].name + '</div>' + data.searchResults[i].fields.Address + '<br />' + data.searchResults[i].fields.City + ', ' + data.searchResults[i].fields.State + data.searchResults[i].fields.ZIP);
pois.add(location);
html += '<tr><td>' + data.searchResults[i].resultNumber + '</td><td>' + data.searchResults[i].name + '</td><td>' + data.searchResults[i].fields.Address + '</td><td>' + data.searchResults[i].fields.ZIP + '</td><td>' + data.searchResults[i].distance + '</td></tr>';
}
html += '</table>';
document.getElementById('corridorResults').innerHTML = html;
map.addShapeCollection(pois);
map.bestFit();
}
});
}
});
event.preventDefault(); /*stop form from submitting normally*/
});
