I am trying to Tilt and Rotate Google Map with mouse right click.
I followed the documentation
https://developers.google.com/maps/documentation/javascript/webgl/tilt-rotation#maps_webgl_tilt_rotation-css
but find no help yet to achieve same thing with mouse movement.
google Api provide shift + drag mouse to tilt and rotate but I do not wanted to use shift button
only mouse
An bypass I tried was that on mouse drag create keyboard Event key down of shift key and keep rotating mouse but that did not work,
shift key is pressed by right click but map did not get that
that code is here
document.body.addEventListener("keydown", (e) => {
if (e.key == "Enter") {
console.log('Enter keydown');
let keyEvent = new KeyboardEvent("keydown", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
}
if(e.shiftKey) {
console.log('Shift Key keydown');
}
if (e.key == "Enter" && e.shiftKey) {
console.log('Enter + Shift Key keydown');
}
});
document.body.addEventListener("keyup", (e) => {
if (e.key == "Enter") {
console.log('Enter keyup');
let keyEvent = new KeyboardEvent("keyup", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
}
if(e.shiftKey) {
console.log('Shift Key keyup');
}
if (e.key == "Enter" && e.shiftKey) {
console.log('Enter + Shift Key keyup');
}
});
document.body.addEventListener("keypress", (e) => {
if (e.key == "Enter") {
console.log('Enter keypress');
let keyEvent = new KeyboardEvent("keypress", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
}
if(e.shiftKey) {
console.log('Shift Key keypress');
}
if (e.key == "Enter" && e.shiftKey) {
console.log('Enter + Shift Key keypress');
}
});
map.addListener("drag", () => {
let keyEvent = new KeyboardEvent("keydown", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
});
map.addListener("dragend", () => {});
$('#map').mousedown(function(event) {
switch (event.which) {
case 1:
console.log('Left Mouse button pressed.');
break;
case 2:
console.log('Middle Mouse button pressed.');
break;
case 3:
console.log('Right Mouse button pressed.');
const keyEvent = new KeyboardEvent("keydown", { shiftKey: true});
document.body.dispatchEvent(keyEvent);
break;
default:
console.log('You have a strange Mouse!');
}
});
from above code on shift key press or mouse right click i am able to get console log that shift key is pressed but how to rotate map on that no idea