current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I would like to display a menu on a shape (cercle,rectangle,polygon) by right-clicking and select and execute a function (change color, ...) on it.
1) I begin by defining an event to my shape: 

google.maps.event.addListener(myShape, 'rightclick', function(event) {...}

2) then I define a div and create the menu:

myMenu = document.createElement("div");
myMenu.className  = 'contextmenu';
myMenu.innerHTML = "<a id='menu1'>item 1<\/a><a id='menu2'>item 2<\/a>";

3) after I must associate this div to my shape:
I DON'T KNOW HOW TO PROCEED
4) Finally I must display in event.LatLng position the menu:
I DON'T KNOW HOW TO PROCEED, probably something like so:

$('.contextmenu').css('left',x  );
$('.contextmenu').css('top',y );

Could you help ?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

You weren't specific on what elements you want to add the context menu so I just added a new circle and did a bit of "quick and dirty" example: http://jsfiddle.net/8Apwr/1/

The trick is here:

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

google.maps.event.addListener(cityCircle, 'rightclick', function(event) {
   var pos = overlay.getProjection().fromLatLngToDivPixel(event.latLng);
   $('#menu').show();
   $('#menu').css("left", pos.x);
   $('#menu').css("top", pos.y);
});

For the best results you should really think about creating a new custom overlay ( https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays ) to draw your context menu. That way it can be reused and the code gets better organized.

share|improve this answer
    
I wrote "on a shape", that means any shapes ! Shall I understand there is no global solution ? –  Bertaud Jun 12 '13 at 20:57
    
I check your example on my map: the menu can be displayed out of the map !? –  Bertaud Jun 12 '13 at 21:16
    
I checked with a rectangle: ok –  Bertaud Jun 12 '13 at 21:42
    
I checked with a polygon: ok it's awesome ! I learned something tonight ;-) –  Bertaud Jun 12 '13 at 21:54
    
ok ? yes and no: the menu is not displayed where the mouse is. For a rectangle, for you, it's the nw point; for me its somewhere between sw and se ! the text of the menu is right shifted for me. Any idea for the differences ? –  Bertaud Jun 13 '13 at 14:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.