ContextMenu

[Martin™]

Hi all.

I've recently had to develop a context menu for a Google Maps API v3
map and decided that i'd share it with you all.

I searched and found no v3 context menu so hope this will be useful to
others.

Main project page:

http://code.martinpearman.co.uk/googlemapsapi/contextmenu/

Advanced example page:

http://code.martinpearman.co.uk/googlemapsapi/contextmenu/1.0/examples/advanced_example.htm

As always - constructive comments welcomed!

Thanks.

Martin.

[xinyu...@126.com]

Thank you for sharing！

On 11月21日, 下午5时00分, Martin(tm) <warwo...@gmail.com> wrote:
> Hi all.
>
> I've recently had to develop a context menu for a Google Maps API v3
> map and decided that i'd share it with you all.
>
> I searched and found no v3 context menu so hope this will be useful to
> others.
>
> Main project page:
>
> http://code.martinpearman.co.uk/googlemapsapi/contextmenu/
>
> Advanced example page:
>

> http://code.martinpearman.co.uk/googlemapsapi/contextmenu/1.0/example...

[Stuart Clarke]

Hi,

Thanks for sharing, I love this simple menu.

I have a quick question that you or someone else might be able to help with. I have a menu for the map that works really well, but I've also introduced a menu for each marker, now when I rightclick the markers, the map menu doesn't disappear and when I rightclick another marker the original menu doesn't disappear, they keep accumulating until I leftclick the map again.

Any thought??

Cheers,

Stu.

[Stuart Clarke]

OK, so I found a pretty simple solution. I created an array with each menu item in it, before I show the desired menu I first run for loop through the array and hide each menu. See below where the addMenu is the normal map context menu (not part of the array) and the MarkerMenus are the menus for the markers.

Placing the menus into an array using the hideOtherMenus function and then showing the newly made menu.

var pos = markerMenus.push(new ContextMenu(map, contextMenuOptions)) - 1;
 
google.maps.event.addListener(marker, 'rightclick', function(mouseEvent){
    hideOtherMenus();
    markerMenus[pos].show(mouseEvent.latLng);
});

And the hideOtherMenus function

function hideOtherMenus(){
    addMenu.hide();
    for(i=0;i<markerMenus.length;i++){
        markerMenus[i].hide();
    }
}

I hope this helps.

[Stuart Clarke]

I do have another question. I'm using the ContextMenu for something other then its intended purpose, but the idea seems fine.

I want a label to show every time I hover the mouse over a polyline, this label is to show the distance between the points. I have no problem determining the distance however, the label is always showing the last distance in the array of distances.

I'm creating an array of polylines so that each one can show the distance between points, it all seems to work just fine, except the distance label.

Here is my code, any ideas??

for(i=0;i<routeCoordinates.length-1;i++){
        var tempCoords = [];
        tempCoords.push(routeCoordinates[i].latLng);
        tempCoords.push(routeCoordinates[i+1].latLng);
        route.push(new google.maps.Polyline({
            path: tempCoords,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 1,
            map: map
        }));

        var leg = Math.round((~~distance(routeCoordinates[i], routeCoordinates[i+1])/1000));
        legFormatted = (leg.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + unitsShort);
       
        var contextMenuOptions={};
        contextMenuOptions.classNames={menu:'context_menu displance_display', menuSeparator:'context_menu_separator'};
        var menuItems=[];
        menuItems.push({className:'context_menu_item', eventName:'distance_click', id:'distanceItem', label: legFormatted});
        contextMenuOptions.menuItems=menuItems;
        var pos = distanceLables.push(new ContextMenu(map, contextMenuOptions)) - 1;


        google.maps.event.addListener(route[i], 'mouseover', function(mouseEvent){
            distanceLables[pos].show(mouseEvent.latLng);
        });
   
        google.maps.event.addListener(route[i], 'mouseout', function(mouseEvent){
            distanceLables[pos].hide();
        });
}

Thanks,

Stu