Snap to nearest street

Question

Hi.

You guys have been helping out solving some of my problems with a Google Map lately, and thank you for that.

I am almost done with this - only one problem is left. When I place the first marker on the map, it snaps to the nearest street (which is fine!) but when I drag the first marker to another place, directions suddenly mess up. And the markers get mixes.

You can see an example on http://dev.korebogen.dk/gmap/

I need to make it possible to move the first marker (still snapping) and when I place the second marker, the directions first load. But in order to make the first marker snap again, I have to load the directions.

I hope some of you have a solution. Thanks in advance.

Answer 1

Blackpool Community Church Javascript Team has an excellent example of exactly this (direct link to the fourth example). Check out their other examples as well.

(disclaimer: I'm not affiliated with them, but have learned a lot about GMaps from their examples)

Edit: I suspect the map events fire somewhat like this (pseudocode, for real event names etc. check the GMaps docs):

• map click: mousedown, mouseup, click:{set red marker}
• drag red marker: mousedown, dragstart{red marker}, mouseup, click:{set marker b} (mousedown+mouseup), dragend
• both markers are set? Yes, get directions

What I'd suggest: in red-marker and marker-A dragstart functions, set some flag "dragging a marker", reset it in dragend function; in the Set marker B function, only set marker if we're currently NOT dragging something (flag is not set).

Answer 2

The code I gave you previously listened for the first two clicks, and added a marker for each. The problem is that when you drag the first marker, it's calling the "click" event again - and thus adding another marker at the same location.

Fortunately, the click event lets you know whether an overlay was clicked. So only execute the code that adds a new marker if overlay is null. Note that overlay is not a boolean.

var listener = GEvent.addListener(map, "click", function(overlay, latlng) {
  if (overlay == null) {
    // code to add new marker
  }
});