Google Map V3 context menu

Horst Walter picture Horst Walter · Aug 24, 2011 · Viewed 28.2k times · Source

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 I got ..

Stack overflow question Google maps v3 - Contextual menu available? of April also just came up with the above examples. So did Gmap3 adding a simple context menu .

But maybe somebody has encapsulated the examples in a reusable library or found something in the meantime. Obviously there was something for V2.

-- Updated 2012-05-31 --

I have found another one http://googlemapsmania.blogspot.de/2012/04/create-google-maps-context-menu.html , but did not have the time to test it yet.

Answer

ShadeTreeDeveloper picture ShadeTreeDeveloper · Jun 9, 2012

I don't think you need a library for this. I'd start by trying:

var contextMenu = google.maps.event.addListener(
        map,
        "rightclick",
        function( event ) {
            // use JS Dom methods to create the menu
            // use event.pixel.x and event.pixel.y 
            // to position menu at mouse position
            console.log( event );
        }
    );

This assumes your map was created with:

var map = new google.maps.map( { [map options] } );

The event object inside the callback has 4 properties

  1. latLng
  2. ma
  3. pixel

where pixel.x and pixel.y are the offset where your click event triggered - counted from the upper left corner of the canvas holding the map object.