Long taps do not activate the context menu in the mobile interface, as noted in the Google Maps API

During the development of my project, I encountered an issue with the Google Maps API not functioning correctly on mobile devices.

I am utilizing GMaps.js, but even that example does not properly support right-click (long tap event).

Here is a snippet of code from file gmaps.js at line 441:

google.maps.event.addListener(this.map, 'rightclick', function(e) {
  if (options.rightclick) {
    options.rightclick.apply(this, [e]);
  }

  if(window.context_menu[self.el.id]['map'] != undefined) {
    self.buildContextMenu('map', e);
  }
});

Any suggestions on how to resolve this issue?

Answer №1

To solve the issue at hand, a simulation of a long click on the specific point is required. before:

    google.maps.event.addListener(this.map, 'rightclick', function (e) {

insert the following code:

    /**
     * Initiate TIMER to trigger opening of context menu
    */
    google.maps.event.addListener(this.map, 'mousedown', function(e) {
        var context_menu_element = getElementById('gmaps_context_menu');

        document.pressTimer = window.setTimeout(function() {
            jQuery(context_menu_element).addClass('mouse_tap');

            if (options.rightclick) {
                options.rightclick.apply(this, [e]);
            }

            if (window.context_menu[self.el.id]['map'] != undefined) {
                self.buildContextMenu('map', e);
            }
        },1000);
        return false;
    });


    /**
     * Cease TIMER and manage opening or closing of context menu
     */
    google.maps.event.addListener(this.map, 'mouseup', function () {
        var context_menu_element = getElementById('gmaps_context_menu');

        if (jQuery(context_menu_element).hasClass('mouse_tap')){
            setTimeout(function () {
                context_menu_element.style.display = 'block';
            }, 0);

            jQuery(context_menu_element).removeClass('mouse_tap');
        } else {
            this.hideContextMenu;
        }

        clearTimeout(document.pressTimer);
        return false;
    });

    /**
     * Cancel context menu opening when moving the map
     */
    var context_menu_with_mouse = ['drag', 'dragend', 'dragstart'];
    for (var ev = 0; ev < context_menu_with_mouse.length; ev++) {
        (function (object, name) {
            google.maps.event.addListener(object, name, function () {
                clearTimeout(document.pressTimer);
                jQuery(getElementById('gmaps_context_menu')).removeClass('mouse_tap').css('display', 'none');
                return false;
            });
        })(this.map, context_menu_with_mouse[ev] );
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React: Struggling to retrieve specific elements from an array stored in component state

For a fun side project, I've taken on the challenge of creating a miniature Pokedex app using React. import React, { Component} from 'react'; import './App.css'; import Card from './components/card/Card.component'; clas ...

How to set up objects with accessors and mutators in ES5 JavaScript?

creating a new object, obj1, with an enumerable property of value 42 > changing the value of obj1.property to 56 > output: 56 > accessing obj1.property returns: 42 When using use strict, an error occurs. To merge multiple objects: using jQuery ...

What is the best way to utilize useClient in the code of my Next.js project?

I've been attempting to execute the code attached below, but I keep encountering an error stating that a component being imported requires useState and should only be used in a Client Component. However, none of its parent components are marked with " ...

Attempting to switch between classes with the click of a button

I am attempting to create a basic animation that involves changing an image from A to B to C when a button is clicked. However, I am encountering an issue with the error message Cannot read properties of undefined (reading 'classList'). I am puzz ...

A comprehensive guide on how to find keywords within an array and then proceed to make all text within the parent div tag stand

I am currently looking for a webpage that displays a list of products based on keywords from an array. Once it detects any word in the array, it highlights it with a red background - everything is working smoothly so far. However, I now wish for the script ...

A method to trigger the opening of a div tag when a button is clicked using Vue.js

<div class="input-wrapper"> <div class="mobile-icon"></div> <input class="input-section label-set" type="text" v-model.trim="$v.mobile.$model" :class="{'is-invalid': ...

sending numerous ajax requests and they all seem to be returning identical results

When firing multiple ajax requests using the setinterval() function, I noticed that both requests are bringing back the same information from another page. Here is the JavaScript code: function views() { setInterval(function(){var xmllhttp //alert ...

Create automated scripts with Selenium using the programming language JavaScript

Is it possible to create selenium webdriver scripts using only javascript? If so, what are the benefits of choosing javascript over languages like java or C#? In what situations would javascript be the preferred option? Appreciate your insights. ...

Retrieve the current time of day based on the user's timezone

Currently, I am working with a firebase cloud function that is responsible for sending push notifications to my app. My main requirement is to send notifications only during the day time. To achieve this, I have integrated moment-timezone library into my p ...

Is it possible to set the input form to be read-only?

I need to create a "read-only" version of all my forms which contain multiple <input type="text"> fields. Instead of recoding each field individually, I'm looking for a more efficient solution. A suggestion was made to use the following: <xs ...

Is Fullpage.js functioning only on local servers?

I have decided to create a personal website showcasing my portfolio using the fullpage.js library. Everything seems to be working fine during development, but once I upload the site to my github.io or another public domain via FTP, I encounter GET errors t ...

accessing the offsetTop property of React elements

When working in React, I've noticed that the offsetTop value of an element differs between componentDidMount and componentDidUpdate. This is surprising to me because I believed componentDidMount occurs after render, meaning the DOM elements should be ...

Reloading a page in Vue-Router after submitting a form

Learning Vue by creating a movie searcher has been quite challenging. The issue I'm facing is that I'm using the same component for different routes with path params to fetch specific information. However, when I submit a form with a query for t ...

Node.js encountering difficulty extracting JSON data

Within this JSON object, the Variable SNS holds valuable information that I need to extract and save in a new variable. `const sns = event.Records[0].Sns.Message;` The specific values I aim to retrieve are Trigger.Namespace, Trigger.Dimensions.value, an ...

When using react-router-dom, a blank page may appear for routes that contain more than one path segment followed by a single forward slash "/"

Whenever I attempt to set up a route with more than one "/" (e.g. "/testing/test"), React simply displays a blank page instead of showing the Test component along with the navigation bar and footer. Interestingly, the route "/testi ...

Leveraging the Recyclability Aspect of a ReactJS Modal

Looking for a way to make a modal dynamic without duplicating too much code. Any suggestions on how to achieve this? I've managed to separate the state from the layout using render props. interface State { open: boolean; } interface InjectedMod ...

What's the best way to manage endless routing options in express.js?

After reviewing the topic of handling routes in Express.js on Stack Overflow, I came across the following example : var express = require("express"); var app = express(); app.get("/", function(request, response) { response.send(&quo ...

Find all elements within JSON data using lodash.js

Hello friends, I'm dealing with a JSON object: var companies = [ { id: 1, name: "Test Company", admin: "Test Admin" }, { id: 2, name: "Another Company", admin: "Test Admin", country: 'Spain' }, { id: 3, name: "New Company", ad ...

Sophisticated solution for html5 video fallback with JavaScript

My Django website allows users to upload videos in mp4 format for others to watch. However, there are cases where certain browsers cannot play this format, like Firefox. In such scenarios, I want to provide a fallback option to download the video instead o ...

In Javascript, ensuring a stopping condition for a recursive function that is looping through JSON data

I am having trouble figuring out how to set the break condition for this recursive function. Currently, the function is causing the browser to freeze (seems to be stuck in an endless loop). My goal is to create a series of nested unordered lists based on ...