MapQuest.js – A JavaScript Library

<!DOCTYPE html> <html class="no-js" lang=""> <head> <title>MapQuest.js – A JavaScript Library | MapQuest for Business</title> <meta charset="utf-8"> <meta name="author" content="MapQuest"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="description" content="Quickly integrate your JavaScript application with our web services using MapQuest.js - a JavaScript library. No extensive code necessary."> <link rel="apple-touch-icon" sizes="57x57" href="/images/favicon/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/images/favicon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/images/favicon/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/images/favicon/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/images/favicon/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/images/favicon/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/images/favicon/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/images/favicon/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png"> <link rel="stylesheet" href="/styles/vendor.css"> <link rel="stylesheet" href="/styles/main.css">  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-53Q3KG');</script>   <script type="text/javascript"> (function() { var didInit = false; function initMunchkin() { if(didInit === false) { didInit = true; Munchkin.init('099-SNC-768'); } } var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//munchkin.marketo.net/munchkin.js'; s.onreadystatechange = function() { if (this.readyState == 'complete' || this.readyState == 'loaded') { initMunchkin(); } }; s.onload = initMunchkin; document.getElementsByTagName('head')[0].appendChild(s); })(); </script> </head> <body class="mapquest-js">   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-53Q3KG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <header> <nav id="nav" class="container"> <a href="/"><section class="header-logo"></section></a> <ul id="primary_nav"> <li class="products-and-services has-subnav"> <a href="/products">Products</a> <ul> <li> <h3>APIs</h3> <ul> <li><a href="/products/data-manager-api">Data Manager</a></li> <li><a href="/products/routing-directions-api">Directions</a></li> <li><a href="/products/geocoding-api">Geocoding</a></li> <li><a href="/products/place-search-api">Place Search</a></li> <li><a href="/products/predictive-search-api">Search Ahead</a></li> <li><a href="/products/mapping-api">Static Map</a></li> <li><a href="/products/traffic-api">Traffic</a></li> </ul> </li> <li> <h3>SDKs</h3> <ul> <li><a href="/products/mapquest-js">MapQuest.js</a></li> </ul> </li> <li> <h3>Other Offerings</h3> <ul> <li><a href="/products/targeted-advertising">Advertising with MQ</a></li> <li><a href="/products/business-listing">Business Listing</a></li> <li><a href="/products/location-data">Location Intelligence</a></li> <li><a href="/products/professional-services">Professional Services</a></li> <li><a href="/products/store-locator">Store Locator</a></li> </ul> </li> </ul> </li> <li class="pricing-and-plans"> <a href="/pricing-plans">Pricing & Plans</a> </li> <li class="resources has-subnav"> <a href="/resources">Resources</a> <ul> <li><a href="http://devblog.mapquest.com/" target="_blank" rel="noopener">Blog</a></li> <li><a href="https://hello.mapquest.com/careers" target="_blank" rel="noopener">Careers</a></li> </ul> </li> <li class="company has-subnav"> <a href="/company">Company</a> <ul>  <li><a href="/resources/partnerships">Partners</a></li> <li><a href="https://developer.mapquest.com/contact-us" target="_blank" rel="noopener">Contact Us</a></li> </ul> </li> <li class="get-started"> <a href="https://developer.mapquest.com/user/register" target="_blank" rel="noopener">Get Started</a> </li> </ul> <ul id="top_nav"> <li class="login"><a href="https://developer.mapquest.com/user/login" target="_blank" rel="noopener">Login</a></li> <li class="signup"><a href="https://developer.mapquest.com/user/register" target="_blank" rel="noopener">Sign Up</a></li> <li class="mapquest-link"><a href="https://developer.mapquest.com" target="_blank" rel="noopener">Developer</a></li> <li class="mapquest-link"><a href="https://www.mapquest.com" target="_blank" rel="noopener">MapQuest.com</a></li> </ul> </nav> </header> <section id="content"> <section class="hero"> <div class="container"> <h1>MapQuest.js</h1> </div> </section> <section class="content-top"> <div class="light-gray-bg"> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>What is MapQuest.js?</h2> <h3>A JavaScript library that allows you to quickly integrate your JavaScript based application with our web services without writing extensive code. Access interactive maps, geocoding, directions, traffic and search ahead by integrating MapQuest APIs with <a target="_blank" rel="noopener" href="http://leafletjs.com/">Leaflet.js</a>.</h3> <a class="btn btn-primary" href="https://developer.mapquest.com/user/register" target="_blank" rel="noopener">Get Started</a> </div> </div> </div> </div> </section> <div class="white-bg"> <div class="container"> <div class="section-title"> <div class="row"> <div class="col-md-12"> <h2>What it can do for you</h2> </div> </div> </div> <div class="features"> <div class="row"> <div class="col-md-6"> <div class="feature-box geocoding-feature"> <div class="feature-icon"></div> <h3>Be different</h3> <p>Stand out with customized map controls, traffic colors and icon services to make maps uniquely yours.</p> </div> </div> <div class="col-md-6"> <div class="feature-box geocoding-feature"> <div class="feature-icon"></div> <h3>Time is money</h3> <p>Quickly and seamlessly integrate your JavaScript application with MapQuest’s web services using just a few lines of code.</p> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="feature-box geocoding-feature"> <div class="feature-icon"></div> <h3>Speedy load times</h3> <p>MapQuest.js simply requires two files to get started, helping you benefit from faster page load times.</p> </div> </div> <div class="col-md-6"> <div class="feature-box geocoding-feature"> <div class="feature-icon"></div> <h3>Easy peezy</h3> <p>Built on top of standard Leaflet conventions, MapQuest.js is straightforward and simple to use.</p> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="feature-box geocoding-feature"> <div class="feature-icon"></div> <h3>Super flexible</h3> <p>Built on top of open source to ensure your existing JavaScript applications and custom code doesn't go to waste.</p> </div> </div> <div class="col-md-6"> <div class="feature-box geocoding-feature"> <div class="feature-icon"></div> <h3>The choice is yours</h3> <p>Tap into OpenStreetMap or licensed data, it’s up to you.</p> </div> </div> </div> </div> </div> </div> <section class="teal-bg"> <div class="container"> <div class="section-title"> <div class="row"> <div class="col-md-12"> <h2 class="white-text">Web Services Offered:</h2> </div> </div> </div> <div class="features"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="feature-text"> <h3>Maps</h3> <p>Easily integrate our interactive map tiles into any application. Choose from various map styles including MapQuest, satellite, hybrid, dark or light. Add functionality with controls and markers.</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="feature-text"> <h3>Traffic</h3> <p>Add traffic incidents, construction and traffic flow to your maps with just a few lines of code. Customize the flow lines’ colors, weight and opacity.</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="feature-text"> <h3>Geocoding</h3> <p>Request our geocoding service, either forward, reverse or batch, with a couple lines of code. Choose to display the results on a map, or not, and complete the task without touching our Web Service.</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="feature-text"> <h3>Search Ahead</h3> <p>Interface with MapQuest’s popular spatially-aware, predictive search API. Provide autocomplete functionality on a map or within a form, and give your users what they’re looking for, faster.</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="feature-text"> <h3>Directions</h3> <p>Make a request to our Directions API, parse the response and add the route to a map. Easy drop-in routing functionality with a click on the map or manual text input, styling to your desire. Provide better user experiences with route narratives and summaries including alternate routes.</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="feature-text"> <h3>Mobile Web</h3> <p>Become current with MapQuest.js. It is optimized for modern browsers both on desktop and mobile.</p> </div> </div> </div> </div> </div> </section> <div class="white-bg"> <div class="container"> <div class="section-title"> <div class="row"> <div class="col-md-12"> <h2>How it Looks</h2> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="js-map" id="map"></div> </div> </div> <div class="row"> <div class="col-md-5"> <div class="code-container" id="json"> <pre><code class="language-javascript">L.mapquest.key = 'KEY'; 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);</code></pre> </div> </div> <div class="col-md-7"> <div class="row"> <div class="col-md-12"> <div class="try-it-out"> <h3>Try it before you buy it. See our APIs in action and get a better understanding of what they can do for you.</h3> <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.0/examples/basic-map/" target="_blank" rel="noopener" class="btn btn-info">Try It Out</a> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="try-it-out"> <h3>Access everything you need to know about each of our APIs and SDKs. From response codes to release notes, it’s all here.</h3> <a href="https://developer.mapquest.com/documentation/mapquest-js/v1.0/" target="_blank" rel="noopener" class="btn btn-info">Documentation</a> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="try-it-out"> <h3>Connect and collaborate with a community of developers who are all on the same topic.</h3> <a href="https://developer.mapquest.com/forums/mapquest-js" target="_blank" rel="noopener" class="btn btn-info">Forum</a> </div> </div> </div> </div> </div> </div> </div> <div class="light-gray-bg"> <div class="container"> <div class="trial-call-out"> <div class="row"> <div class="col-md-12"> <h2>One subscription for all your geospatial needs</h2> </div> </div> <div class="row"> <div class="col-md-12"> <a href="https://developer.mapquest.com/user/register" target="_blank" rel="noopener" class="btn btn-primary">Start Your Free Trial</a> </div> </div> <div class="row"> <div class="col-md-12"> <a class="btn btn-link" href="/pricing-plans">learn about our enterprise plans</a> </div> </div> </div> </div> </div> </section> <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.1/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.1/mapquest.css"> <script type="text/javascript"> window.onload = function() { L.mapquest.key = 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24'; 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> <footer> <div class="footer-about"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-9 col-md-10 col-lg-10"> <h2 class="title">About MapQuest for Business</h2> <div class="content"> <p class="description">MapQuest for Business powers thousands of businesses with location-enabled Geospatial solutions. Our platform provides companies of any size with the means to increase efficiency and streamline processes, connect with customers, and ultimately deliver the all-important exceptional user experience. And, as usual, the MapQuest for Business experience is backed by the customer service and technical support that we're known for.</p> </div> </div> <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2"> <h2 class="title small no-subtitle">For Sales and Support</h2> <div class="contact-info"> <ul> <li>3601 Walnut St, 5th Floor</li> <li>Denver, CO 80205</li> <li><a href="mailto:sales@mapquest.com">sales@mapquest.com</a></li> </ul> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="footer-menu"> <div class="col-xs-6 col-sm-3"> <ul class="menu"> <li class="first expanded"> <a href="https://developer.mapquest.com/user/register" target="_blank" rel="noopener">Get Started</a> <ul class="menu"> <li><a href="/pricing-plans">Pricing & Plans</a></li> <li><a href="https://developer.mapquest.com/faq" target="_blank" rel="noopener">FAQ</a></li> </ul> </li> </ul> </div> <div class="col-xs-6 col-sm-2"> <ul class="menu"> <li class="expanded"> <a href="/company">About Us</a> <ul class="menu">  <li><a href="/resources/partnerships">Partners</a></li> <li><a href="http://devblog.mapquest.com" target="_blank" rel="noopener">Blog</a></li> <li><a href="http://company.mapquest.com/careers/" target="_blank" rel="noopener">Jobs</a></li> </ul> </li> </ul> </div> <div class="col-xs-6 col-sm-3"> <ul class="menu"> <li class="expanded"> <a href="/products">Products</a> <ul class="menu"> <li><a href="/developer-apis-sdks">APIs & SDKs</a></li> <li><a href="/products/professional-services">Professional Services</a></li> <li><a href="/products/location-data">Location Intelligence</a></li> <li><a href="/products/targeted-advertising">Advertise With Us</a></li> </ul> </li> </ul> </div> <div class="col-xs-6 col-sm-2"> <ul class="menu"> <li class="expanded"> <a href="/products/professional-services/">Support</a> <ul class="menu"> <li><a href="/resources">Resources</a></li> <li><a href="https://developer.mapquest.com/documentation" target="_blank" rel="noopener">Documentation</a></li> <li><a href="https://developer.mapquest.com/forum" target="_blank" rel="noopener">Forums</a></li> <li><a href="https://developer.mapquest.com/contact-us" target="_blank" rel="noopener">Contact Us</a></li> </ul> </li> </ul> </div> <div class="col-xs-6 col-sm-2"> <ul class="menu"> <li class="last expanded"> <a href="/social">Social</a> <ul class="menu"> <li><a href="//www.linkedin.com/company/mapquest/" target="_blank" rel="noopener">LinkedIn</a></li> <li><a href="//www.twitter.com/mqdeveloper/" target="_blank" rel="noopener">Twitter</a></li> <li><a href="//www.facebook.com/mapquest/" target="_blank" rel="noopener">Facebook</a></li> <li><a href="//www.instagram.com/mapquest/" target="_blank" rel="noopener">Instagram</a></li> </ul> </li> </ul> </div> </div> </div> <div class="row"> <div class="copyright col-xs-12 col-sm-12 col-md-12 col-lg-12"> <p><span class="logo"></span>© <script>document.write((new Date).getFullYear().toString());</script> MAPQUEST, INC. ALL RIGHTS RESERVED. <a href="https://hello.mapquest.com/privacy" target="_blank" rel="noopener">PRIVACY POLICY</a> | <a href="https://hello.mapquest.com/terms-of-use" target="_blank" rel="noopener">TERMS OF USE</a> </p> </div> </div> </div> </footer> <script src="/scripts/vendor.js"></script> <script src="/scripts/plugins.js"></script> <script src="/scripts/main.js"></script>  <script type="text/javascript"> bN_cfg = { h: location.hostname }; function runOmni() { s_265.pfxID="map"; s_265.pageName=document.title; s_265.channel="us.mqbus"; s_265.linkInternalFilters="javascript:,mapquest.com"; s_265.prop1="MQBusiness"; s_265.prop2="corporate"; s_265.prop54="no_cms"; s_265.prop62="video_novideo"; s_265.prop65="original_content"; s_265.mmxgo=true; var s_code=s_265.t(); } s_265_account ="aolsvc"; (function(){ createScript('https://o.aolcdn.com/os/aol/omniture.min.js'); createScript('https://o.aolcdn.com/os/aol/beacon.min.js'); function createScript(src) { var s = document.createElement('script'); s.type = 'text/javascript'; s.src = src; document.getElementsByTagName('head')[0].appendChild(s); } })(); </script>  </body> </html>

CINXE.COM

MapQuest.js – A JavaScript Library | MapQuest for Business