1

I am working on Google maps on web pages. I would like to allow my customers to add their own location, so they can add markers on the map.

My question is, what is the best action the user expects to click (or do) when they want to add a marker on the map?

Just to re-iterate, I am working on the web not mobile.

1

Click based method

As you mentioned in your question, the first way is to drop a pointer on click.

The click option is well used by Google maps, a click and drag moves the map around and a double click zooms in. This means that there are issues with overloading the click event with too many functions and that can lead to problems.

For example, the user wants to move the map but not update their location, but they misuse the mouse and trigger a click, they have then lost their original location unintentionally and will have to reload from the database (which may cause other problems with unsaved things etc.) or re-find the original marker position.

You could disable the other click options, but this brings it's own set of problems as the map becomes more difficult and less intuitive to use. You could also use the right click and select method, which is used by Google Maps.

An alternative interface method

There is another way in which point data can be input by a user via a map. If you place a cross-hair in the centre of the map and allow it to be zoomed and dragged underneath this static marker, you can then allow the user to interact with the map normally with double clicks and drags in order to position their location underneath the cross hair, then save the centre point of the map as their location.

  • an option to switch on draggability is useful if your user is likely to drag the map without realising and accidentally save a new location, essentially ensure that they explicitly decide to set their location before doing so. This may not be appropriate in some circumstances such as if your user was repeatedly creating locations.
  • for exact precision, make your map an odd number of pixels wide and deep ensuring that the one pixel cross hair focus lines up exactly with the centre of the map and the reported location is precise.
  • use the map call back that fires once on 'stop drag' rather than fires constantly during drag to lighten the load on the client.

The problem with this solution over the first one is that it only allows the addition of one pointer per map, though you could reload on save with all previous pointers marked and build up a map in that way.

Conclusion

You have a choice of which option to use. If you want a simple, intuitive method for adding one point and you'd like to avoid awkward click based interactions then the cross hair method is best. If you need to have multiple points added to a single map in one interaction phase then the first option, with right clicks is probably better.

Some further considerations on point marking with Google maps

  • give the option to remove a location completely from the map
  • use Google maps rather clever location search which will take postcodes, towns, full addresses and even landmarks and the return latitude longitudes, which in many cases will provide sufficient granularity and remove the need to locate and mark altogether

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.