MapQuest.com
Business
Navigation
Getting Started
Developer Blog
Mobile SDKs
Navigation Android
Navigation iOS
Maps Android
Maps iOS
Search Ahead Android
Search Ahead iOS
Web SDKs
MapQuest.js
MapQuest-GL.js
PlaceSearch.js
Examples
Basic
Fill out form
Find the Nearest Business
Franchises and Categories
Map the Results
No Style
Templating
APIs
Data Manager API
Directions API
Geocoding API
Icons API
Search API
Place Search API
Search Ahead API
Static Map API
Traffic API
Open APIs
Open Directions API
Open Elevation API
Open Geocoding API
Open Guidance API
Open Search (Nominatim) API
Open Static Map API
Legacy Products
Leaflet Plugins
Static Map v4 API
Open Guidance v1 API
Tools
Lat/Lng Finder
Link to MapQuest
Static Map v4 Wizard
Share
Getting Started
Developer Blog
Documentation
Mobile SDKs
Navigation Android
new
Navigation iOS
new
Maps Android
new
Maps iOS
new
Search Ahead Android
Search Ahead iOS
Web SDKs
MapQuest.js
MapQuest-GL.js
beta
PlaceSearch.js
new
Examples
Basic
Fill out form
Find the Nearest Business
Franchises and Categories
Map the Results
No Style
Templating
APIs
Data Manager API
Directions API
Geocoding API
Icons API
Search API
Place Search API
Search Ahead API
Static Map API
Traffic API
Open APIs
Open Directions API
Open Elevation API
Open Geocoding API
Open Guidance API
Open Search (Nominatim) API
Open Static Map API
Legacy Products
Leaflet Plugins
Static Map v4 API
Open Guidance v1 API
Tools
Lat/Lng Finder
Link to MapQuest
Static Map v4 Wizard
Share
PlaceSearch.js
Map the Results
Edit the code below and click "Try It Now" to display the result.
<html> <head> <script src="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/place-search-js/v1.0.0/place-search.css"/> <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> <script type="text/javascript"> window.onload = function() { let ps = placeSearch({ key: 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24', container: document.querySelector('#search-input'), useDeviceLocation: true, collection: [ 'poi', 'airport', 'address', 'adminArea', ] }); L.mapquest.key = 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24'; var map = L.mapquest.map('map', { center: [0, 0], layers: L.mapquest.tileLayer('map'), zoom: 2 }); L.mapquest.control().addTo(map); let markers = []; ps.on('change', (e) => { markers .forEach(function(marker, markerIndex) { if (markerIndex === e.resultIndex) { markers = [marker]; marker.setOpacity(1); map.setView(e.result.latlng, 11); } else { removeMarker(marker); } }); }); ps.on('results', (e) => { markers.forEach(removeMarker); markers = []; if (e.results.length === 0) { map.setView(new L.LatLng(0, 0), 2); return; } e.results.forEach(addMarker); findBestZoom(); }); ps.on('cursorchanged', (e) => { markers .forEach(function(marker, markerIndex) { if (markerIndex === e.resultIndex) { marker.setOpacity(1); marker.setZIndexOffset(1000); } else { marker.setZIndexOffset(0); marker.setOpacity(0.5); } }); }); ps.on('clear', () => { console.log('cleared'); map.setView(new L.LatLng(0, 0), 2); markers.forEach(removeMarker); }); ps.on('error', (e) => { console.log(e); }); function addMarker(result) { let marker = L.marker(result.latlng, {opacity: .4}); marker.addTo(map); markers.push(marker); } function removeMarker(marker) { map.removeLayer(marker); } function findBestZoom() { let featureGroup = L.featureGroup(markers); map.fitBounds(featureGroup.getBounds().pad(0.5), { animate: false }); } } </script> </head> <body style="border: 0; margin: 40px;"> <div id="map" style="width: 100%; height: 530px;"></div> <input type="search" id="search-input" placeholder="Start Searching..." /> </body> </html>
Try It Now