Google Maps Draggable Marker

[jaraiza]

Hi,

I'm trying to implement a draggable marker into an application. Right now, I've been unable to use MapViews to add dynamic Google Maps (I think those are still not supported in B4A), so I've done it using PHP and WebViews, until now that have worked.

But Draggable Marker is another thing, it needs javascript to add interactivity (to my understanding), so I'm using this example: Google Maps API v3 Draggable Marker Code, but I don't know how to retrieve lon and lat back to the app...

Any advice on this?

Thanks a lot!

 

[warwound]

You can do this by using WebViewExtras.

Here's some example B4A code where i've used WebViewExtras to add a JavascriptInterface to the WebView, the JavascriptInterface enables the map javascript to call B4A Subs:

'Activity module
Sub Process_Globals

End Sub

Sub Globals
   Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   WebView1.Initialize("WebView1")
   
   '   use WebViewExtras to add the JavascriptInterface to the WebView
   '   the javascript can now call B4A Subs
   Dim WebViewExtras1 As WebViewExtras
   WebViewExtras1.addJavascriptInterface(WebView1, "B4A")
   
   Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
   WebView1.LoadUrl("file:///android_asset/draggable-markers.html")
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

'   this Sub is called by the map javascript when the Marker "dragend" event occurs
Sub Marker_DragEnd(NewLatitude As String, NewLongitude As String)
   '   only String types can be passed from the javascript to B4A so we need to convert the String types to Double
   Dim Latitude As Double=NewLatitude
   Dim Longititude As Double=NewLongitude
   Log("The user has dragged the Marker to ("&Latitude&", "&Longititude&")")
End Sub

Note that i've also created a Sub Marker_DragEnd.

Now a small edit to the original map javascript:

google.maps.event.addListener(marker, 'dragend', function() {
   updateMarkerStatus('Drag ended');
   geocodePosition(marker.getPosition());
   //   call the B4A Sub Marker_DragEnd passing the Marker's new position
   B4A.CallSub('Marker_DragEnd', true, marker.getPosition().lat(), marker.getPosition().lng());
});

Now when the Marker 'dragend' event occurs the javascript calls the B4A Sub Marker_DragEnd passing the Marker's new position.

Martin.

 

[jaraiza]

Thank you very much, that just did the trick

I owe you a Shandy!

Greets!

 

[jaraiza]

I think there's a strange problem....

The sample you gave me and the javascript code I had behave the same way, the marker appear twice and when I drag the little yellow man to use street view a wave of icons is dragged as well '

I'm including a shot I got while dragging the little man (also the double marker appears)

This is only happening inside WebView, if you use a desktop browser it works ok.

Any idea why is this happening?

Thanks a lot

 

[warwound]

That's odd.
I tested the map on my ZTE Blade (Gingerbread) and it works perfectly.
Now testing on my Huawei Ascend (ICS) i still see a single Marker but dragging the streetview pegman causes the entire pegman sprite to be displayed - as in your screengrab.
Returning to the map from streetview took a while to correctly tap the streetview close button and again dragging the pegman causes the entire sprite to display.

This is the url to that sprite: http://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png
You can see that instead of displaying just part of the sprite image it is displayed entirely.

Looking for a solution i tried to edit the manifest:

'End of default text.
SetApplicationAttribute(android:hardwareAccelerated, "false")

Now on ICS i get two Markers and even more repetition of the sprite image!
(Setting hardwareAccelerated to true seems to be the default on ICS).

I'm not sure what to suggest, if i browse to http://gmaps-samples-v3.googlecode....runk/draggable-markers/draggable-markers.html using the default ICS browser i get 1 Marker and some but not all of the sprite image showing - same as the default B4A behavior.

It looks as though nobody has reported this issue before, so it's really a bug to report to the Google Maps API team:
http://code.google.com/p/gmaps-api-issues/issues/entry?template=Maps API v3 - Bug

Sorry i can't offer a solution.

Martin.

 

[jaraiza]

Hi, thanks anyway

But I'd like to hear Erel's opinion before sending a bug report, it may be caused by WebView implementation, I have no other way to testing it. I've tested your link with FireFox and it works 100%, but with default browser it fails like you say.

I'm confused about who is responsible of the bug, google or Android's web implementation because using FireFox is just ok... mmm.. Ereeel!!! Heeeelp!!

I guess there isn't another way than implementing Android's MapView, I've seen lots of examples like this Android Drag'n'Drop Pin Map but there's always a MapView implementation.

 

[Erel]

I think that warwound is correct. Seems like a bug in the Maps API (though it can also be a problem with WebView).

 

[warwound]

Well i've reported the problem on the Google Maps API group:
https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/7e53906c800decd1?hl=en

I wouldn't hold your breath waiting for a fix...

@jaraiza

You can disable the pegman control:
https://developers.google.com/maps/documentation/javascript/controls
Not ideal but at least it stop your app from looking broken.

And if you experiment with the manifest hardwareAccelerated attribute you should be able to fix the problem where the Marker is rendered twice.

Martin.

 

[jaraiza]

Well i've reported the problem on the Google Maps API group:
https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/7e53906c800decd1?hl=en

I was looking for this when I realized there is going to be a new version very soon, so they are asking for bug reports

New Version Coming

I basically re-posted the bug to the link they said in that post.

Thanks for your support addressing this.