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
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
Maps
Geocoding
Routing
Traffic
Open Data
API Reference
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
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
Maps
Geocoding
Routing
Traffic
Open Data
API Reference
Static Map v4 API
Open Guidance v1 API
Tools
Lat/Lng Finder
Link to MapQuest
Static Map v4 Wizard
Share
Open Routing
Edit the code below and click "Try It Now" to display the result.
<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> <script src="https://open.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24"></script> <script src="https://open.mapquestapi.com/sdk/leaflet/v2.2/mq-routing.js?key=lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24"></script> <script type="text/javascript"> window.onload = function() { var map, dir; map = L.map('map', { layers: MQ.mapLayer(), center: [ 38.895345, -77.030101 ], zoom: 15 }); dir = MQ.routing.directions(); dir.route({ locations: [ 'New York, NY', 'Washington, DC' ] }); map.addLayer(MQ.routing.routeLayer({ directions: dir, fitBounds: true })); } </script> </head> <body style='border:0; margin: 0'> <div id='map' style='width: 100%; height:530px;'></div> </body> </html>
Try It Now
Try It Nows
Maps
Basic Map
Map with Geolocation
Map with Layers
Geocoding
Use Advanced Location
Batch Geocoding
POI Popup
Popup
Custom Icons
Reverse Geocoding
Use Single-Line Addresses
Routing
Use Advanced Location
Alternate Routes
Custom Start & End Markers
Customization
Multiple Locations
Narratives
Optimized Routing
Options
Use Single-Line Addresses
Traffic
Traffic Map
Traffic with Layers
Open
Open Maps
Open Geocoding
Open Routing