-1

I'm working on a project in which I'd have a Google Map on a page on which a user has to mark a specific location. On non-touch devices, draggable markers that return coordinates on drop, solves this problem.

However, the project I'm creating requires this functionality to also work optimally on mobile. Does anyone have an idea of a nice alternative to drag and drop to get coordinates on a map?

Please note that the locations that are selected will not be related to addresses, so I cannot reverse geocode addresses.

Any help is appreciated.

tl;dr; I need a touch-friendly way for users to mark a specific location on a Google map to get its coordinates.

Improve this question
3
  • 1
    Maybe something like this: How can I drag an icon inside google maps? (works for me on Android) Commented Oct 18, 2016 at 17:09
  • Thanks geocodezip, this does seem to work. However, the example seems to contain obfuscated JavaScript. This example does seem to indicate that standard drag events still work on touch-devices. I'll work up something based on this. Commented Oct 18, 2016 at 20:39
  • 1
    Here is an unobfuscated fiddle Commented Oct 18, 2016 at 20:45

1 Answer 1

Reset to default
0

As geocodezip pointed out, the standard drag events still work on mobile. However, I prefer a different approach. Using drag events on touch devices feels counter intuitive. The users thumb is on the pointer and they cannot see where they drop it. Users need to drag the map, and also drag the pointer, which is a hassle on a small screen.

I've found a solution with a centered image overlay, without using images.

The HTML of my map is as follows:

<div id="map"> <div id="map_canvas" style="width:100%; height:400px"></div> <div id="cross"></div> </div>

Then I place the cross div over the map like so:

#map { position: relative; } #cross { z-index: 9999 !important; position: absolute; top: 50%; width: 100px; height: 100px; left: 50%; margin-left: -50px; margin-top: -50px; display: block; }

Then I create a crosshair with some CSS-magic:

#cross:before, #cross:after { content: ""; position: absolute; z-index: -1; background: #d00; opacity: .5; } #cross:before { left: 50%; width: 30%; margin-left: -15%; height: 100%; opacity: .5; } #cross:after { top: 50%; height: 30%; margin-top: -15%; width: 100%; opacity: .5; }

By using ´pointer-events:none´ in CSS, any mouse or touch events should pass right through. Haven't tested in legacy browsers though. 

#cross, #cross:before, #cross:after { pointer-events: none; }

Please find my complete solution here: http://jsfiddle.net/4vrzgrx1/2/

My answer builds on this related question: Google Maps transparent image overlay

Hope this can be useful for some people.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.