NearPlace

Join 1,400+ marketers, founders, UX designers, and software engineers and receive our next insights:


August 2018
M T W T F S S
« Jul    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Categories


How to Create a MapQuest Map with Multiple Markers.

NearPlaceNearPlace

 


About MapQuest

MapQuest is a free map builder which is acquired by Verizon Communications(Oath inc.) since 2015. MapQuest offers really extended directions builder features for many countries across the entire world. Also, the MapQuest map builder service provides a special feature which let you compare nearby gas prices. For more information just read the further parts of the guide about this amazing mapping service.


MapQuest – Introduction

At the beginning let’s check the MapQuest map builder interface. To do it you need to go to official MapQuest website, but probably you are already here if you are looking for a guide on how to add MapQuest multiple markers or how to make directions. You can notice there a lot of options like:

mapquest-interface

There are many more, but these are the most interesting ones. Before we check the available options let’s register at first, so we will be allowed to create our own MapQuest custom map.

mapquest-register-graphical

After the registration, you will be redirected to your new dashboard.

mapquest-user-dashboard

GRAPHICAL METHOD

MapQuest Custom Map

You can add here things such as your home and work address, favourites, vehicles etc., but let’s go back to the main interface which you have seen before and choose “Create a custom My Map” option.

This will allow you to make your own MapQuest custom map which you can share or embed, but about what we will type in the further part of the tutorial.

mapquest-custom-map

As the Developer of the tool says now you have to go to “Find places” if you want to add your own locations to the custom map.

MapQuest-adding-place-button

Now you have some interesting possibilities to choose from. In case you are on a trip or in another city you can find easily nearby:

These are only the most popular ones, check the GIF below and see how many possibilities you have to choose from MapQuest map builder.

mapquest-places-gif

For example, if you choose car washes the map will display all nearby places in which you can wash your car and the price of a service.

mapquest-car-washes

What if we want to add our own places? You should notice a special search field where you can enter the place, category or address so the map will find the location easily.

find-place-mapquest

Once you search for the location which you are interested in and find it on the map, click or tap the “More” button and you will have the possibility to add a place to your MapQuest custom map. If you haven’t created your own MapQuest map yet the tool will ask you if you want to make one before you save the place.

create-custom-map-mapquest

I guess you know how much the savable map is useful especially if you can save multiple locations with just one click.

How to display marked places

If you want to see all your marked places on MapQuest custom map you should go back to the main interface and choose “My Maps” option.

My-Maps-Mapquest

Now choose your custom map which should be listed under the “My Maps” tab.

mapquest-my-map

Once you click or tap the map which you have created before you will be redirected to your own official MapQuest custom map! It should include the all pinpoints which you have chosen before. If not, try to add the new place again.

Mapquest-custom-map-done

MapQuest Embed Map

Many people are creating their custom maps with multiple markers because they want to embed the map in a website. Now once we have created a MapQuest multiple markers map, there is a question. Is it possible to embed MapQuest in a website? Our answer is: YES. First, click the share button.

mapquest-share-map

Now you should notice a new pop-up with few options – our choice is button named “embed”.

mapquest-embed-map

The embedding option in MapQuest at least, in my opinion, is awesome. You have a possibility to set width and height of your MapQuest custom map, but not only. You may also set the default zoom level and the map style(Map or Satellite view). Also on the right for sure you have noticed already a preview of the map you are going to embed on a website.

You can update the preview by clicking on a special “Update Preview and HTML” button, which will also update the HTML code of your MapQuest map.

mapquest-embedding-code

Now just paste the HTML code into your website’s code and it should be working perfectly. We recommend to paste it into <body> or <head> section, but it fully depends on your choice and where do you want to have your map on the website.

mapquest-embed-success-gif

MapQuest custom map in an email message

You can also share your map through the email message, you just need to insert an email address to which you want to send your map, your name and an optional message if you would like to type smth to this person like e.g “Hey since we fly to Egypt next week I have prepared the map with the best European restaurants”. Once you send the map the other person will receive an email with your message and link to the map. It is really easy and comfortable possibility of sharing the map, so we advise you to use it especially if you have to show the map to many people.

MapQuest-map-email

MapQuest mobile message

There is also a possibility to send the map to a mobile number, so the person who received your message will have an option to display your map on a phone device. In my opinion, it is another awesome option which helps a lot, if you can’t write to this person through the internet.

MapQuest-mobile-message

Printing a map

It is a really helpful feature when you are looking for a map for flyer or you want to have printable directions for invitations when you are organising some kind of event. Thanks to it random people who don’t really know your physical address might get to your place. To print the MapQuest map which you have created before you need to go back to the main interface and choose the “Print your Map” feature.

print-your-map

If you would like to print your own map, just go to “My Maps”(we showed you before how to do it) choose your map and click the “print” button

print-my-map

Then you will be sent to the special printing editor which will allow you to modify the centre and zoom of your map. Also, you can write a short note about your event or business if it comes to the map for flyer.

super-map-prepare-to-print

You can confirm the changes by clicking a big green “print” button which will redirect you to the last step.

print-preview

The last step just asks about the printer, pages, copies and more basic settings related to printing. After you confirm them, the printing should begin. It is a good way to promote your business too because of earlier mentioned maps for flyer and also one of the best options if it comes to printable directions for invitations.

MapQuest Directions

MapQuest map is also a great directions builder which will help you to get to the place which you have chosen on the map. If you want to make a direction just go to the main interface of MapQuest and choose the “Get Directions” button.

mapquest-directions

After choosing this option you should notice 2 fields:

Once you fill the fields with data and confirm the route you will have displayed the road and estimate time of the car trip. There is also an amazing option which shows you an estimate fuel cost.

driving-route

You can even add your own vehicle to the route so estimate fuel cost will be more accurate!

add-vehicle

Also if you would like to avoid some kind of roads you can also configure your route settings in “advanced settings” of directions. Everyone needs a break from driving too especially on long trips, that’s why you have a possibility to add a stop where you can rest for a while.

mapquest-route-settings2

As you see the directions builder from MapQuest is really useful and it is great to have that kind of help when you are going for a long trip with a car or a walk e.g when you are on holidays and don’t know the city well.

MapQuest Route Planner

MapQuest route planner is a really useful feature when may optimize your driving route thanks to which you will save much time. The route planner is provided up to 26 locations so it should be really enough for everyone. Thanks to the MapQuest route planner you can mark the shortest driving route of your trip. Also if you marked stops during the trip the feature can re-order them to make them the most effective stops which you could have ever used.

shortest-time-route-planner

There is also an option which we have described before in MapQuest Directions where you can choose the unit of the distance and to avoid specific kind of roads.

mapquest-routes-exceptionsJust like with the map you can share the route with other through social media, email or a mobile number.

share-route

If you really don’t want to add every address manually you have a possibility to copy all of them at once to a special field in Copy/Paste tab.

route-planner-copy-paste

Once you are a fan of importing data through the CSV or XLS file you will be happy too. There is a feature which allows you to import a file with the addresses you need. You can also download special files with the templates to make everything easier.

route-planner-import

As you can notice MapQuest route planner is an amazing feature which might really shorten your driving time, so if you are planning a trip MapQuest official route planner is a must!

Final Thoughts

Graphical UI of the MapQuest is really intuitive and easy in usage so you should be able to create your own map without any problem. It is important to have a mapping service like that, especially when you need the best multiple driving directions or to print a map for flyer.

API METHOD

How to generate MapQuest API Key

As you know MapQuest has a developer version which allows you to e.g add multiple custom markers. Thanks to the MapQuest API you can also code the directions, routes and many more. Now we will focus on adding pinpoints to MapQuest custom map. At first, you need to register on MapQuest official developer website so you will be able to generate your own API Key.

mapquest-developer-register

Now once you want to generate MapQuest API key just click the button “Get your Free API key” which should be available on the home page after registering.

get-your-free-api-key

Now you should be redirected to your profile management, here you should choose “My keys” tab and click on “Manage Keys”

manage-api-keys-mapquest

After being redirected you will notice a big blue button with “Create a new key”, choose it to if you want to start coding.

create-new-api-mapquest-key

Name your app as you want and add an optional Callback URL if you have any. Once you’ve pressed “Create App” button and your key will be created.

add-api-key

After doing each of previous steps now you should see your new MapQuest API on a keys list. If you aren’t going to use some of the keys you may just revoke them.

How to generate MapQuest Custom Map

To create a map in JavaScript and HTML you need to implement special MapQuest libraries to your <head> section and then a script which will display the map on a website. Also, you need to create a special div with your map ID, where you also set the width and height of the MapQuest map. The best solutions for the beginners which we found is to go to developer MapQuest website and copy the code from examples. Thanks to it you will have a ready map on which you can add directions or markers.

copy-map-code

As it was said earlier in the “map” div you can change the properties of the map for your website preferences.

MapQuest-map-properties

Adding MapQuest multiple markers

Adding MapQuest multiple markers is really simple and with good sources of information, even non-coders might be able to add the pinpoints to their own map. At first, we advise you go to MapQuest developer website again where you can find the code with markers, circles and polygons. Let’s focus on the multiple pins for now. We need to add two things to our previous code – window.onload function and function which will display a map marker in our code.

mapquest-functions

Is that all…? Yes, it’s all about adding this little piece of code and the marker is ready.

MapQuest-marker-succes

If you want to drop multiple pinpoints just reply the code and change the properties like :

MapQuest-multiple-markers

MapQuest polygons

MapQuest polygons might be useful when you want to mark some piece of the map which is important for you or for anything else you can imagine. It is also pretty easy to create a polygon in JavaScript, you just need to copy one function and create one variable with the points. You can copy the polygon code from here.polygon-functions
Once you add the points of the polygon and the function which will display it, check your map because it should be working already.

MapQuest-polygon-success

Final Thoughts

Summarising, if you can search for things in Google, and move on the MapQuest developer website, coding the basic features in API is a piece of cake. As you saw above you just need to copy good pieces of codes and modify them under your own preferences, so even if you are a non-coder, but you want to add multiple MapQuest markers, don’t be afraid and try it even today! Also if you would like to try a free and professional store locator for your business don’t hesitate and register on our website!