Create a Map with Directions in MapQuest and React JS

2 min readApr 4, 2022

If you need to use a Map in your Website you know that the Google Maps can be so expensive. That’s why I search to alternative and I found the MapQuest.

Typescript or Not?

We going use Typescript not completely, but in part of we have control.

Styles

Add in your index.html the tag link

Lets’ go make

The first step is create a file with name MapQuest.tsx

Explaining the main parts of code

We created a tag script in DOM with command

const script = document.createElement('script');

So us can put a source path of MapQuest

script.src = "https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js";

And add a event listener to know when is loaded

script.addEventListener('load', () => {}

When his loaded we finally can get the MapQuest JS Class his is going to create in window variable with our type L. Finally we can set key, create a baseLayer, create a Map with zoom, GeoPoint and routes. And last but no more important create a direction route.

After all things we just add in our body element a child with our tag script

It’s over, our map is going show in div with id=“map”