Creating a context menu on a map

Using menus in a user interface is a way to communicate with users. Users select a menu item to interact with web applications. Some of the menu types can be accessible from a visible place, but some of them can be accessible with some extra actions, such as context menus. Context menus usually appear on applications with a right-click of the mouse.

In this recipe, we will create a context menu on the map that opens when we right-click on the map. This menu includes zoom in, zoom out, and add marker functions. You will also get the position of the right-click to use it in some geo methods such as adding a marker in this example.

Getting ready

This recipe is also like the other recipes in that we assume you already know how to create a simple map. So, we will only show extra lines of code to add the context menu.

You can find the source code at Chapter 5/ch05_context_menu.html.

How to do it…

The following are the steps we need to create a map with a context menu...