The right click event for the Map returns a MouseEvent which includes 
the LatLng.  I am using it in that instance. 

However, the method also handles the right click for a Marker which 
returns an Event not a MouseEvent.  Event does not include a LatLng so I

have to make the calculation then. 
http://code.google.com/apis/maps/documentation/javascript/reference.html
<http://www.google.com/url?sa=D&q=http://code.google.com/apis/maps/docum
entation/javascript/reference.html&usg=AFQjCNF1n5qmEFXobmhPhcvwPA1byDVKN
g>  
#Marker 

I left this out of my code sniplet.  This is my modification to GeoXml3 
that adds the rightclick event to the marker. 

        if (parserOptions.rightClickFunction != null) { 

            google.maps.event.addListener(marker, 'rightclick', 
parserOptions.rightClickFunction); 

        } 

 

From: [email protected]
[mailto:[email protected]] On Behalf Of Nathan
Raley
Sent: Thursday, December 16, 2010 5:35 PM
To: [email protected]
Subject: Re: [Google Maps API v3] How to get latitude and longitude from
marker right click event

 

Also, why are you calculating the pixel coordinates and translating to
lat/lng when the click event itself provides you with lat/lng of the
point clicked or the marker clicked?

On Thu, Dec 16, 2010 at 4:30 PM, Nathan Raley <[email protected]>
wrote:

Why aren't you passing the event to the function so the function call
has access to the properties triggered by the event?

 

On Thu, Dec 16, 2010 at 3:13 PM, Kevin <[email protected]>
wrote:

How do you determine the coordinates of the marker clicked on in it's
right click event handler?  And an even bigger question, how do you make
it work for all browsers?

 

My scenario:

When a marker is right clicked, display a context menu at the marker and
save the latLon coordinates for later use.

When "Zoom in" to marker is selected on the context menu, center the map
on the saved coordinates and zoom in.

 

My problem:

The coordinates I am saving are wrong for all browsers except IE.

I am able to calculate the right pixel location for displaying the
context menu.  That works in IE, Firefox, Chrome & Safari.  But the lat
lon coords I am calculating from that pixel position are wrong for all
browsers except IE.

 

Javascript:

        var _googleMap = null;
        var _overlayView = null; // This will be useful in getting
latLon from pixel in map's container

        function load() {
            var mapTypes = new Array();
            mapTypes.push(google.maps.MapTypeId.ROADMAP); 
            mapTypes.push(google.maps.MapTypeId.HYBRID); 
            mapTypes.push(google.maps.MapTypeId.TERRAIN);

            var latlng = new google.maps.LatLng(cityLatitudeCenter,
cityLongitudeCenter);
            
            var myOptions = {zoom: 8,
                             center: latlng,
                             mapTypeControlOptions: { mapTypeIds:
mapTypes },
                             mapTypeId: google.maps.MapTypeId.TERRAIN };
            _googleMap = new
google.maps.Map(document.getElementById("googlemap"), myOptions);

            google.maps.event.addListener(_googleMap, 'zoom_changed',
CheckZoom);
            google.maps.event.addListener(_googleMap, 'bounds_changed',
SetDefaultMap);  // Saves map position to cookie
            google.maps.event.addListener(_googleMap, 'center_changed',
SetDefaultMap);   // Saves map position to cookie
            google.maps.event.addListener(_googleMap, 'rightclick',
showContextMenu);
            google.maps.event.addListener(_googleMap, 'click',
hideContextMenu);

            _overlayView = new google.maps.OverlayView();
            _overlayView.draw = function() { };
            _overlayView.setMap(_googleMap);

            loadKMLFiles();  // uses GeoXML3 to parse and place markers
on map via v3 api
        }

// === Global variable that can be used by the context handling
functions ==
var clickedLatLng;

 

markerContextHtml = '<div>' +
                    '<a href="javascript:zoomIn()"><div class="context"
onmouseover=this.style.backgroundColor=\'#A0A0A4\'
onmouseout=this.style.backgroundColor=\'#ffffff\'>&nbsp;&nbsp;Zoom In to
Location&nbsp;&nbsp;<\/div><\/a>' +
                    '<a href="javascript:zoomOut()"><div class="context"
onmouseover=this.style.backgroundColor=\'#A0A0A4\'
onmouseout=this.style.backgroundColor=\'#ffffff\'>&nbsp;&nbsp;Zoom Out
to State&nbsp;&nbsp;<\/div><\/a>' +
                    '<\/div>';

 

function showContextMenu(event) {
    // This method is called by both a right click event on the map and
a right click on a marker.  
    // The marker mouseevent does not include latitude longitude
coordinates
    var x;
    var y;
    
    // Get clicked pixel location
    if (event.pixel != null) {  // Map mouse event returns pixel in
event
        x = event.pixel.x;
        y = event.pixel.y;
    }
    else if (BrowserDetect.browser == "Explorer") { // Marker event for
IE returns pixel in event as x and y
        x = event.x;
        y = event.y;
    }
    else if (BrowserDetect.browser == "Mozilla") { // Marker event for
Mozilla - must calculate x,y pixel position
        x = event.clientX - _googleMap.getDiv().offsetLeft -
window.scrollX;
        y = event.clientY - _googleMap.getDiv().offsetTop -
window.scrollY;
    }
    else { // Marker event for other browsers (tested for Chrome and
Safari) - must calculate x,y pixel position
        x = event.pageX - _googleMap.getDiv().offsetLeft;
        y = event.pageY - _googleMap.getDiv().offsetTop;
    }

    // Store latLng for later user
    if (event.latLng != null) { // Click event on map
        clickedLatLng = event.latLng;
    }
    else { // Click event on marker doesn't contain LatLon.  Derive
latLon from clicked pixel in map's container
        var xy = new google.maps.Point(x, y);
        clickedLatLng =
_overlayView.getProjection().fromDivPixelToLatLng(xy);
        //clickedLatLng = new google.maps.LatLng(this.position.lat(),
this.position.lon());
    }

    // Adjust the context menu location if near an edge
    if (x > _googleMap.getDiv().offsetWidth - 120) { x =
_googleMap.getDiv().offsetWidth - 120 }
    if (y > _googleMap.getDiv().offsetHeight - 100) { y =
_googleMap.getDiv().offsetHeight - 100 }

    // Set context menu position
    contextmenu.innerHTML = markerContextHtml;
    contextmenu.style.position = "absolute";
    contextmenu.style.left = x.toString() + "px";
    contextmenu.style.top = y.toString() + "px";
    contextmenu.style.visibility = "visible";

    // Add context menu to the map
    $(_googleMap.getDiv()).append(contextmenu);
}

 

function zoomIn() {
    // perform the requested operation
    _googleMap.setCenter(clickedLatLng);
    _googleMap.setZoom(_maxZoomLevel / 1);  // divide by one to convert
to number

    // hide the context menu now that it has been used
    hideContextMenu();
}

-- 
You received this message because you are subscribed to the Google
Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to
[email protected].
To unsubscribe from this group, send email to
[email protected]
<mailto:google-maps-js-api-v3%[email protected]> .
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

 

 

-- 
You received this message because you are subscribed to the Google
Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to
[email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to