Google Map V3 context menu

Question

I am looking for a Google Map V3 context menu library. I have found some code examples here

1. Gizzmo\'s blog
2. Google API tips
3. GMap3
4. How

Answer 1

Go to this demo-purpose website: http://easysublease.org/mapcoverjs/

For context menu, I do not suggest implementing one subclass of the overlayView Class provided by Google Maps API. First, one instance of subclass of overlayView should be added to the five panes provided by Google. More possibly one should add this instance to pane overlayMouseTarget . But, this instance is "shadowed" by other dom over it. So normal original browser event such mouseover, mouseout cannot reach this instance.

One must use Google Maps API method: addDomListener to handle it(why?). It requires lots of JavaScript code to implement different event handlers, do lots of css class adding and deleting just to realize some visual effects, which could be done using several lines of CSS code if this instance is outside the map container.

So actually converting one external dom outside google map container into one context menu has merit that it can receive original DOM events from browser. Also using some external library can make the target behave better. As context menu, it should not only be able to handle original events, but also those events from Map.

-----------see implementations below------------------------

At the map part HTML, this is the code:

  
 
  
I am map UI control button's container, I think one can use jQuery UI to make me look better


    
zoomIn
    
zoomOut
  
  


    I am map context menu container, you can sytle me and add logic to me, just as normal DOM nodes.
    since I am not in Map Container at all! 
    

      

        Marker1
        Marker2
      
    
    

      Content of next Marker1
      
    
  

It shows how one developer can convert one external DOM (id=demoContextPanel) into one map context menu by just adding one css class ".mc-ascontextmenu"! That pages uses mapcover.js, which helps developer to manage some key components of Map such as Map control UIs, context menu, and customized markers. Then Developers have full freedom to style its map UIs.

If you need more, you can go to its Github see readme.md: https://github.com/bovetliu/mapcover