gmaps-context-menu

Create context menus for Google Maps maps, markers, or shapes. Looks exactly like context menus in the current Google Maps.

Simply add the css and js to your site and it is ready to go!

<link rel="stylesheet" href="css/gmaps-context-menu.css" />
<script type="text/javascript"  src="js/gmaps-context-menu.js"></script>

Features

• Easily customizable
• Supports multiple context menus for different elements
• Looks almost exactly like Google Maps context menus
• Show or hide context menu items with a condition

Documentation

Go to the Wiki for detailed documentation about the GmapsContextMenu.

Code examples

With your map and markers, circles, shapes...

const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: {lat: 40.697, lng: -74.259}
});
const circle = new google.maps.Circle({
    center: {lat: 40.697, lng: -74.259},
    strokeColor: "#00fff0",
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: "#00fff0",
    fillOpacity: 0.15,
    radius: 10000
});
const marker = new google.maps.Marker({
    position: {lat: 40.697, lng: -74.259},
    draggable: true,
    optimized: false,
    zIndex: 99999999,
    showing: false
});

Use gmaps-context-menu to add the same context menu for all elements.

const defaultContextMenu = new GmapsContextMenu(map, {
    options: [
        {
            text: "Move marker here",
            showWhen: function () {
                return true;
            },
            onclick: function (latLng) {
                // insert your code here
            }
        },
        {
            text: "Search here",
            showWhen: function () {
                return true;
            },
            onclick: function (latLng) {
                // insert your code here
            }
        }
    ]
});
defaultContextMenu.registerFor(circle);
defaultContextMenu.registerFor(marker);

Use gmaps-context-menu to make different context menus for different elements. If you don't register the context menu for a map element it will not appear on right click. Though, you don't want multiple menus registered to open for the same map or they will all open at the same place. An additional parameter on the non-map context menus can turn that off.

const mapContextMenu = new GmapsContextMenu(map, {
    options: [
        {
            text: "Map option",
            showWhen: function () {
                return true;
            },
            onclick: function (latLng) {
                // insert your code here
            }
        }
    ]
});

const circleContextMenu = new GmapsContextMenu(map, {
    registerOpenForMap: false,
    options: [
        {
            text: "Circle option",
            showWhen: function () {
                return true;
            },
            onclick: function (latLng) {
                // insert your code here
            }
        }
    ]
});
circleContextMenu.registerFor(circle);

const markerContextMenu = new GmapsContextMenu(map, {
    registerOpenForMap: false,
    options: [
        {
            text: "Marker option",
            showWhen: function () {
                return true;
            },
            onclick: function (latLng) {
                // insert your code here
            }
        }
    ]
});
markerContextMenu.registerFor(marker);