5

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.

2 Answers2

5

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

Piskvor left the building
  • 91,498
  • 46
  • 177
  • 222
  • 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. –  Apr 30 '09 at 07:56
  • I will try something new with the fourth example, 2 secs. :) –  Apr 30 '09 at 08:18
  • I can not get it to work as intended. Is it possible for you to cook up something that'll work with my code? –  Apr 30 '09 at 08:51
  • @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? – Piskvor left the building Apr 30 '09 at 09:56
  • 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. –  Apr 30 '09 at 10:29
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
  }
});
Chris B
  • 15,524
  • 5
  • 33
  • 40
  • 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. –  Apr 30 '09 at 21:16