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.
