How to find lat/lon location that is closest to mouse cursor on the google map

1
votes

I have many markers.

On the left I have list of marker-abstractions of actual markers on the google map.

I decided to use polylines

   var flightPlanCoordinates = [
    new google.maps.LatLng(near_cursor_lat, near_cursor_lon),
    new google.maps.LatLng(marker_lat, marker_lon)
  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

the idea is that user points his mouse on the marker-abstraction box on the left, and then he shown the line which goes from marker-abstraction to actual marker on the map. I already have everything except of the STARTING POINT(red dots on the image)

How do I find starting lat/long which is located next to the mouse pointer, when the mouse is pointed at the box on the left

Some details: When the mouse is pointed to the box that sais PERSON1, I want the coordinates of the first red dot. When the mouse is pointed to the box that sais PERSON2, I want the coordinates of the second red dot. And so on. There is a trick part- left boxes are located outside the google maps div; in addition, if there are many boxes with PERSONS, the left div will allow to scroll those persons up and down, so the vertical correlation between the persons box, and the red dot is dynamic.

In theory, I think, I need an event that is triggered when I point to one of the boxes. When even is fired, I need to measure the vertical distance in pixels from the top to the mouse pointer. Then, when I have the vertical distance, I need to perform some action that would measure same vertical distance on the google map, and would get me that point on the map in lat/lon coordinates.

enter image description here

3
javascriptgoogle-maps-api-3
Is there any reason why you don't want the map to pan and center on the marker when you hover on the side menu? – Rick
it is already there via 'center icon' – Andrew
I don't understand what you're asking. Try re-phrasing your question better. – Marcelo
Those things, or buttons, that you call "marker-abstractions", what type of object are they? Are they overlays? Are they on top of the map or beside the map? From your image, longitude of all the red dots would be the same, while latitude would be the latitude of the top of the map minus the heigth of the buttons multiplied by the position.(button1, button2, etc). – Marcelo
Is this what you are trying to tell: When you hover on person 3 box, a line should be drawn starting from the point beside person 3 box on map upto the corresponding marker on the map? – Cdeez

3 Answers

1
votes

This should be the answer to your question :

You should be using markers to represent (persons) and then add a listener onMouseOver like in the below post :

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)

Use overlay in the listener to get the projection and the pixel coordinates:

google.maps.event.addListener(marker, 'mouseover', function() {
    var projection = overlay.getProjection(); 
    var pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
    // use pixel.x, pixel.y ... (after some rounding)
});

copied from : Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker

1
votes

@MehdiKaramosly answer is pretty spot on.

Only slightly furthering the above, to get what would be the lat lng of an element that is not part of the visible map (if the map was visible there) you can pass the events page X/Y to the line:

projection.fromLatLngToContainerPixel(marker.getPosition());

like so:

var pixelLatLng = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX,e.pageY));

I have put a very basic example at: http://tinkerbin.com/p30yEXqH

If you click anywhere outside of the map (which equates to the same as clicking on a div that overlays it), you will see in the console log that the lat/lng for wherever you have clicked (even though it is not in the visible map space), is logged.

Cheers,

C.

1
votes

Update with Working Example of this code Second Update with JsFiddle Example of both ways click and open map window or mouseover map to highlight listing

As i understand the problem you are having is as following:

  1. Persons are listed in the div separate from map
  2. Persons have latitude and longitude associated to them on the map
  3. Map displays location of person with markers on it using lat long (might be stored in db or something)
  4. You want it so people can highlight a person on map as well as list with mouse over.

If you have lat/long available on map or from list you need to relate them together.

Solution is something like this but there are many ways to achieve this mapping

  1. In your div where person is listed. Insert a data-mapid attribute to each person element when a person hovers over it you highlight it and get the data-mapid from there.
  2. On your map when you render a marker you can additionally pass a parameter data-mapid or something else with same value and have a highlight function on map as well.
`jQuery("#gmap3ul li[data-gb='plist']").each(function(){
           elemtopush = {
                        lat:jQuery(this).attr("data-lat"), 
                        lng:jQuery(this).attr("data-long"), 
                        data:{
                            "ht":jQuery(this).html(),
                            "id":jQuery(this).attr("data-mapid")
                        }
                    };
                    ulmarkerspgb.push(elemtopush);
                });`

In above code i have html to show on map as well as id as data-mapid now this mapid can be person1 person2 and so on so you can relate back to div with lists. i am using ul and li to list them in the div.

On mouse over your markers events you can do something like this

mouseover: function(marker, event, data)
                                            {
                                                clearalllist();
                                                var listelement = jQuery("td[data-mapid='"+data.id+"']");
                                                jQuery(listelement).attr('style','background-color:#ccc');
                                                var map = jQuery(this).gmap3('get'),
                                                infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
                                                    if (infowindow){
                                                        infowindow.open(map, marker);
                                                        infowindow.setContent(data.ht);
                                                        google.maps.event.addListener(infowindow, 'closeclick', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });
                                                        google.maps.event.addListener(infowindow, 'close', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });

                                                    } else {
                                                        jQuery(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data.ht}});
                                                        infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
                                                        google.maps.event.addListener(infowindow, 'closeclick', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });
                                                        google.maps.event.addListener(infowindow, 'close', function(event) {
                                                            jQuery(listelement).attr('style','');
                                                        });
                                                    }
                                            }

There is a lot of redundant code i have copied pasted from 3 locations so you might just be able to get what you want out of it.

This can make both map linked to list and list linked to map. See my second update on top or click this JSFiddle example. When you click on list on top it opens the map window and when you mouse over the map icons it highlights the listing.

This also populates the map via list rather than hard coding lat longs in js.