Question

I’m trying to add some custom controls to Google Maps and style them with CSS and JQuery. I’ve read through the documentation, and unless I’ve missed something, it doesn’t cover the problem I’m running into.

Here is the markup, styling, and JQuery for reference…

http://jsbin.com/uxewuf/5/edit#source

Now, I add the control divs to the map just as was shown in the documentation.

var controls = document.createElement('DIV');
var container1 = document.createElement('DIV');
var button1 = document.createElement('DIV');

$(container1).css('float','left');
$(button).addClass('inactive');

container1.appendChild(button);
controls.appendChild(container1);
//leaving out the code for the other button to save space....


map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controls);

While this does indeed add the controls to the map, these divs do not seem to be able to be accessed by the JQuery events.

I’ve been testing out different things in an attempt to solve this, such as inspecting the objects and the Webkit JS Console. I have found that JQuery does indeed select the objects, but it isn’t ‘hearing’ the events from the mouse.

While the ability to dynamically change the classes of the buttons is not essential to this program, it would be nice if I could get this to work.

Thanks for the help!

Answer 1

Messing around with custom google map controls myself

I threw together simple example, hope it helps
http://jsfiddle.net/bwah6/4/