58825

Rectangle drawn by google maps DrawingManager does not trigger the mousemove event

Question:

I want to:

<ul><li>Draw rectangles on a google map</li> <li>Have at most on rectangle</li> <li>Display the current location of the mouse when it moves</li> </ul>

So, I came up with this code - <a href="http://jsfiddle.net/mark69_fnd/vBwf6/4/" rel="nofollow">http://jsfiddle.net/mark69_fnd/vBwf6/4/</a> I subscribe to the rectanglecomplete event of the DrawingManager instance in order to dispose of the previous rectangle, save the reference to the new one and subscribe to the mousemove event on the rectangle.

The problem, is that the mousemove event is never triggered.

What am I doing wrong and how to fix it?

Thanks.

Answer1:

Here is a function, which gives GPS coordinates by pixel offset related to top-left corner of map's container.

function getLatLngByOffset( map, offsetX, offsetY ){ var currentBounds = map.getBounds(); var topLeftLatLng = new google.maps.LatLng( currentBounds.getNorthEast().lat(), currentBounds.getSouthWest().lng()); var point = map.getProjection().fromLatLngToPoint( topLeftLatLng ); point.x += offsetX / ( 1<<map.getZoom() ); point.y += offsetY / ( 1<<map.getZoom() ); return map.getProjection().fromPointToLatLng( point ); }

Add 'onmousemove' event listener on map's div element, then pass mouse position related to div's top-left corner.

<strong>UPDATE</strong>: <a href="http://jsfiddle.net/ezduA/" rel="nofollow"><strong>DEMO</strong></a> (Tested on <em>Chrome</em>)

Recommend

  • How to remove square and circle option from DrawingManager
  • How can I get co-ordinates with drawing?
  • Get iPhone mic data for streaming over Socket
  • Automatic chart update with new data entry
  • MouseMove works, MouseDown does not. WPF XAML
  • How to drag image clone after drop.?
  • Is Lambda code repeated with dynamically created controls?
  • DataTemplates to display a collection of Points as Ellipses in WPF
  • An unhandled exception of type 'System.AccessViolationException' occurred
  • C# TPL calling tasks in a parallel manner and asynchronously creating new files
  • how to end the nested loop
  • Detecting both left and right mouse movement and no movement
  • Update data in d3.js group
  • Optimising asyncronus HttpClient requests
  • Getting coordinates of a component in java
  • Circle movement upon rectangle Collision
  • Dispose not working as expected in DirectorySearcher
  • c# winform DrawToBitmap offscreen
  • Why people use prototype in javascript when it is easy to inherit using apply () and call () methods
  • c++ regex_replace not doing intended substitution
  • Cannot save model when using ember render helper
  • C#: Import/Export Settings into/from a File
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • GAE: Way to get reference to an HttpSession from its ID?
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • What is the purpose of TaskExecutor in spring?
  • How can I set a binding to a Combox in a UserControl?
  • How to define custom class, title, and target in Link Browser for content elements and the new rte_c
  • AJAX Html Editor Extender upload image appearing blank
  • Ionic 2 storage is not cleaning up on uninstall - Only for signed APK
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Refering to the class itself from within a class mehod in Objective C
  • Alert pop up with LWUIT
  • Exception “firebase.functions() takes … no argument …” when specifying a region for a Cloud Function
  • Highlight one bar in a series in highcharts?
  • In LanguageTool, how do you create a dictionary and use it for spell checking?
  • Updated Ionic CLI but shows previous version (Windows)
  • Calling of Constructors in a Java
  • PHP: When would you need the self:: keyword?
  • Conditional In-Line CSS for IE and Others?