Snap to nearest street

Question

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.

Muezzin

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).

Trull

I've checked them out and incorporated some of their code in my example, but it is not working as intended. No clue what I've done wrong. – Muezzin

I will try something new with the fourth example, 2 secs. :) – Muezzin

I can not get it to work as intended. Is it possible for you to cook up something that'll work with my code? – Muezzin

@Jan: checked your site in Opera 10, FF 3 and IE 7, works correctly the way you describe it - or I'm reading it wrong. Can you describe the steps that should happen and the steps that actually happen? Also, in what browser? – Trull

Thanks for your time. Sure; When the map is loaded I plot the first marker (red) - It automatic snaps to the nearest street -> Perfect! Lets say I placed the marker wrong, and want to drag it to the right place: I drag the red marker, and suddenly it loads directions on the map - and add a A and a B marker - But I only wanted to move my red marker - not load directions yet. When the red marker is placed correctly - I place my second, and the directions load. This is what I'm seeking. Right now It just messes up if I drag the red (first) marker. Sorry for my broken english. – Muezzin

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
  }
});

Berlioz

I incorporated your previous code in my example (might need refresh). And it works - I can drag the first marker without messing up. But I need the first marker to snap to the nearest road (click and on drag), so i can avoid plotting the marker on a field for example. I'm apparently not very good at Google Maps API or Javascript for getting this to work. I appreciate your help. – Muezzin