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\'> Zoom In to >> Location <\/div><\/a>' + >> '<a href="javascript:zoomOut()"><div class="context" >> onmouseover=this.style.backgroundColor=\'#A0A0A4\' >> onmouseout=this.style.backgroundColor=\'#ffffff\'> Zoom Out to >> State <\/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]<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.
