Question

I’m trying to write an Android app that will allow a user to search for a generic destination (e.g., “gas station”) and be presented with up to ~5 nearby locations to choose from. The screen results would display the user location in the center, and possible destination options would be indicated by markers.

The trick is that I don’t want to rescale the map from its starting scale, and so some of the possible destinations may not be visible on the screen. I want to dynamically draw a clickable direction indicator (such as an arrow) that emanates from the user location and points to any off-screen destination. If there are multiple off-screen destinations, I’d probably want to scale the arrow lengths to indicate relative distances. If the user clicks on the arrow, they should be “teleported” to the off-screen location.

Any thoughts on how to best implement this? The only information I’ve found on overlays uses static files (Most overlays seem to be just .PNG files for markers; one example had a route that was drawn from an XML file). I’d need to calculate the arrow based on direction
to the destination (direction the arrow points) and the relative distance to that location (arrow length), so the overlay is something I’d have to come up with at run time.

I think the main challenge is drawing the clickable arrows, but another question that comes to mind is, should I search using the Google Maps API, or is this job more suited to the Google Places API?

Thanks!

Answer 1

I guess we should put the teleportation on hold until the problem of a dynamically-drawn, clickable overlay is solved then!

A dynamically-drawn, clickable overlay is merely a subclass of Overlay. You will override one or both of the draw() methods to render your arrows using the Canvas 2D drawing API. You will override onTap() to be notified of taps on the map, to see if they tapped on an arrow. You add the overlay to the MapView via addOverlays().add().

Most overlays seem to be just .PNG files for markers

Those are usually ItemizedOverlay classes. That’s much simpler to implement, particularly if you are one of those developers (like me) who is all thumbs when it comes to Canvas. However, you cannot achieve what you want with an ItemizedOverlay, in all likelihood.

I’d need to calculate the arrow based on direction to the destination (direction the arrow points) and the relative distance to that location (arrow length), so the overlay is something I’d have to come up with at run time.

Correct. You can use a Projection to help convert between pixel space and geo-space (latitude and longitude), if needed.

Note that this all assumes you are trying to use MapActivity and MapView. You are also welcome to use WebView or a plain browser to bring up your own JavaScript-based maps, if you prefer.