MapQuest.com
Business
Navigation
Getting Started
Developer Blog
Web SDKs
MapQuest.js
API Reference
Examples
Maps
Map with MapQuest Control
Map with Custom Tiles
Map with Layers Control
Map with Leaflet Draw Control
Geocoding
Basic Geocoding
Geocoding with a Single Line Address
Geocoding with an Advanced Location Object
Geocoding with Multiple Locations
Reverse Geocoding
Geocoding with Custom Icons
Geocoding with Custom Popups
Directions
Basic Directions
Directions with an Advanced Location Object
Directions with Multiple Waypoints
Directions with Optimized Waypoints
Directions with Alternate Routes
Directions with Custom Icons and Ribbons
Directions with Disabled Dragging
Directions with Disabled Traffic Ribbon
Directions that Avoid Toll Roads
Directions that Avoid Bridges and Tunnels
Biking Directions
Walking Directions
Map with a Directions Control
Map with a Directions Narrative Control
Search Ahead
Geocoding Control with Search Ahead
Filtering Results for Search Ahead
Traffic
Map with Traffic Layers
Map with Traffic Control
Miscellaneous
Adding Markers, Circles, and Polygons
Adding a GeoJSON layer
Adding a Tile Overlay
Adding an Image Overlay
Showing Marker Clusters
Showing Clusters as a Heat Map
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
Legacy Products
Leaflet Plugins
Tools
Lat/Lng Finder
Link to MapQuest
Share
Getting Started
Developer Blog
Documentation
Web SDKs
MapQuest.js
API Reference
Examples
Maps
Map with MapQuest Control
Map with Custom Tiles
Map with Layers Control
Map with Leaflet Draw Control
Geocoding
Basic Geocoding
Geocoding with a Single Line Address
Geocoding with an Advanced Location Object
Geocoding with Multiple Locations
Reverse Geocoding
Geocoding with Custom Icons
Geocoding with Custom Popups
Directions
Basic Directions
Directions with an Advanced Location Object
Directions with Multiple Waypoints
Directions with Optimized Waypoints
Directions with Alternate Routes
Directions with Custom Icons and Ribbons
Directions with Disabled Dragging
Directions with Disabled Traffic Ribbon
Directions that Avoid Toll Roads
Directions that Avoid Bridges and Tunnels
Biking Directions
Walking Directions
Map with a Directions Control
Map with a Directions Narrative Control
Search Ahead
Geocoding Control with Search Ahead
Filtering Results for Search Ahead
Traffic
Map with Traffic Layers
Map with Traffic Control
Miscellaneous
Adding Markers, Circles, and Polygons
Adding a GeoJSON layer
Adding a Tile Overlay
Adding an Image Overlay
Showing Marker Clusters
Showing Clusters as a Heat Map
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
Legacy Products
Leaflet Plugins
Tools
Lat/Lng Finder
Link to MapQuest
Share
MapQuest.js
Map with Layers Control
Edit the code below and click "Try It Now" to display the result.
<html> <head> <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() { L.mapquest.key = '8nIoYUx9GyjZsdehJySzjprSvZIqgM42'; var baseLayer = L.mapquest.tileLayer('map'); var map = L.mapquest.map('map', { center: [37.7749, -122.4194], layers: baseLayer, zoom: 12 }); L.control.layers({ 'Map': baseLayer, 'Hybrid': L.mapquest.tileLayer('hybrid'), 'Satellite': L.mapquest.tileLayer('satellite'), 'Light': L.mapquest.tileLayer('light'), 'Dark': L.mapquest.tileLayer('dark') }).addTo(map); } </script> </head> <body style="border: 0; margin: 0;"> <div id="map" style="width: 100%; height: 530px;"></div> </body> </html>
Try It Now