CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3gesturehtml2canvas
zack pecenak
zack pecenak

Reputation: 23

Remove "use two fingers..." warning on google maps with javascript

I have a web application written in javascript which uses the google maps api to map certain features. However, I am having some unwanted results when users with touchscreen computers try to use the map.

Specifically, I would like to get rid of the warning that tell users "use two fingers to move the map". Similiar to this picture (https://reyner.id/wp-content/uploads/Embedded%20Google%20Map%20Mobile%20Function.jpg)

The issue is due to the fact that when I take "screenshots" of the map (with html2canvas), the warning displays over the map and blocks the image. I think the easiest thing to do might be to disable that warning, but I can't find any documentation on how to do that.

Please let me know if it would help to include any codes or links.

Upvotes: 2

Views: 6707

Answers (2)

Jason
Jason

Reputation: 901

I know the question was answered, but for future visitors, I would like to offer a more complete answer, building on the one provided by @Sudhir_Bastakoti:

$('#map-canvas').click(function() {
    setTimeout(function() {stopTwoFingerWarning(); }, 2500);

});
function stopTwoFingerWarning() {
$('.gm-style-pbc').hide();
$('.gm-style-pbc').css('display', 'none!important');    
}

The above functions will let the visitor see the warning on the first instance, but hide it after 2.5 seconds. Otherwise, how is a visitor to ever receive the instructions to begin with? They will not know how to use the map, and get frustrated.

I chose 2.5 to allow for the message to sink in, but set as you like.

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100195

you could use CSS to hide the message,

.gm-style-pbc{
    display: none !important
}

Upvotes: 3

Related Questions