https://github.com/mattwright324/gmaps-context-menu
Create context menus for Google Maps maps, markers, or shapes
https://github.com/mattwright324/gmaps-context-menu
context-menus google-maps google-maps-api
Last synced: 3 months ago
JSON representation
Create context menus for Google Maps maps, markers, or shapes
- Host: GitHub
- URL: https://github.com/mattwright324/gmaps-context-menu
- Owner: mattwright324
- License: mit
- Created: 2021-01-01T23:13:55.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-02T23:56:49.000Z (over 5 years ago)
- Last Synced: 2025-03-04T23:32:41.320Z (over 1 year ago)
- Topics: context-menus, google-maps, google-maps-api
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gmaps-context-menu
Create context menus for Google Maps maps, markers, or shapes. Looks exactly like context menus in the current [Google Maps](https://www.google.com/maps).
Simply add the css and js to your site and it is ready to go!
```html
```
### 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](https://github.com/mattwright324/gmaps-context-menu/wiki/GmapsContextMenu) for detailed documentation about the `GmapsContextMenu`.
## Code examples
With your map and markers, circles, shapes...
```js
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.
```js
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.
```js
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);
```