如何仅使用JavaScript放大Google Maps？

Question

I'm challenging myself to navigate Google Maps ( http://maps.google.com ) without my mouse and just by entering commands into Chrome Developer Console.

I found that the class name of the main canvas that Google Maps uses is widget-scene-canvas , and I've successfully obtained that canvas with

document.getElementsByClassName('widget-scene-canvas')[0]

Hence, I tried to trigger a click event to zoom in with

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
    0, 300, 300, 300, 300, false, false, false, false, 0,
    document.getElementsByClassName('widget-scene-canvas')[0]);
document.body.dispatchEvent(evt);
evt.initMouseEvent("click", true, true, window,
    0, 300, 300, 300, 300, false, false, false, false, 0,
    document.getElementsByClassName('widget-scene-canvas')[0]);
document.body.dispatchEvent(evt);

However, it doesn't even seem like Google Maps is detecting a click.

What am I doing wrong? Anyone other adventurous people want to give this a shot?

Answer 1

This works for me:

Zoom in: $(".widget-zoom-in").click();

Zoom out: $(".widget-zoom-out").click();

Answer 2

Invoking clicks on the zoom buttons in vanilla

function zoom(out) {
    document.querySelector('.widget-zoom-' + (out ? 'out' : 'in')).click();
}

zoom();
setTimeout(zoom.bind(null, true), 1e3);