Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
pfazzino
Posts: 12
Registered: ‎01-16-2013
My Device: BB10 Dev Alpha

Google Map Marker corruption

I've got basic google map functionality working fine in webworks in ripple/simulator and dev alpha device (i.e. it loads, pans, zooms, etc...).

 

The problem I have is that when adding multiple markers, I am seeing a weird image sizing/truncation of the marker image. At first I thought it was my marker images so then went with the default provided by the api. That still exhibited the problem so I then fired up the maps sample from the webworks project (https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/Maps). Without touching a thing I get exactly the same behaviour. Here's a screenshot demonstrating the issue - https://www.dropbox.com/s/22u87xnbwsi4vdl/MapsSample.png

 

Looking at the maps sample video - http://www.youtube.com/watch?v=lSn3rex7PCI&playnext=1&list=PL4E44CF5122BBF246&feature=results_video unfortunately only one marker is rendered and it seems to render fine although check out how small that marker is!!!

 

This is a show stopper for me right now and pretty much the only thing preventing me for publishing my application to App World.

 

Regards

 

Paul

Developer
jplust
Posts: 44
Registered: ‎12-17-2012
My Device: Bold 9900, PlayBook, DevAlphaC, Z10LE

Re: Google Map Marker corruption

[ Edited ]

got the SAME problem in my app at this moment.... didnt find anything!

 

in my app, the marker image is corrupt PLUS the marker position ist wrong!

 

funny: i tried to do a drop animation, the marker drops on the CORRECT point, after the animation is done, it moves a litte down the map. :Whistling:

 

i thougt it would be the simulator, but you tried it on the dev alpha... thx 4 that :-)

 

EDIT: the Map Contols dissapearing too...

BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: Google Map Marker corruption

Didn't see this happening for me, can you try the solution from this post?

 

http://stackoverflow.com/questions/5695164/google-maps-marker-cut-in-half-internet-explorer

 

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Contributor
marcderosa
Posts: 12
Registered: ‎02-17-2012
My Device: developer

Re: Google Map Marker corruption

Not quite the same as you are seeing but I have also been running into marker sizing and positioning problems in the latest version of the BB OS both on the simulator and on the dev alpha phone.

For the sizing, I find that markers display about 2-4 times the size I would expect, compared to a browser like safari or chrome.  The size issue will come up if I use the default map marker or a custom marker image, like a *.png . I can size images down if I use a custom image. Something like

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(newItnSummary.latitude, newItnSummary.longitude),
   map: this.getMap(),
   icon:  {
      url: 'resources/images/star.png',

      scaledSize: new google.maps.Size(10, 10),
      anchor: new google.maps.Point(5, 5)

    },
   cursor: 'default'
});

will do the trick.

Positioning has been a more insidious issue. Here images will generally be placed about 200 - 500 meters to the south east of their proper location. In a fair amount of cases my markers are being placed beyond the visual bounds of my map, so they appear to be 'missing'. None of these positioning problems happen when using the same code with Android / iOS based browsers. 

The work around I have found, which solves both my  sizing and positioning issues, is to use an SVG icon. Something like

var star = {
   path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
   fillColor: "red",
   fillOpacity: 0.8,
   scale: 0.1,
   strokeColor: "red",
   strokeWeight: 1,
   anchor: new google.maps.Point(11, 11)
};
var marker = new google.maps.Marker({
   position: new google.maps.LatLng(newItnSummary.latitude, newItnSummary.longitude),
   map: this.getMap(),
   icon: star
   cursor: 'default'
});

This code will display a red star pretty much as expected. 

The other marker implementation I have, based on google.maps.OverlayView, has been fine throughout my work with BB10, so that is also most likely a viable option if all else fails. It is a bit more work, but not that much....

 

Best,

Marc

Developer
jplust
Posts: 44
Registered: ‎12-17-2012
My Device: Bold 9900, PlayBook, DevAlphaC, Z10LE

Re: Google Map Marker corruption

[ Edited ]

@chad...didnt work :-(

 

BUT i checked to use an older api version(3.8)... the marker position is correct, the marker is "complete" and dont resize, but there is another error:

 

 

if i use the same code with api v. 3.exp, it looks like this (resized + position incorrect + cut off on zoom + zoomcontrols not visible....):

 

dont know what to do :Helpsmilie:

Contributor
pfazzino
Posts: 12
Registered: ‎01-16-2013
My Device: BB10 Dev Alpha

Re: Google Map Marker corruption

I agree, it's a bit of a mess. I see all the same issues, markers appearing/disappearing as I zoom in and out, cut off images, wrong size, wrong position.

 

Chad, I've tried playing with margins but I can't get any consistent/correct results plus this feels like a hack just waiting to break as seen in that post. I'm puzzled how you're not seeing the same behavior that I see with your exact same sample app accross both dev alpha and simulator. Thanks for the your suggestion all the same.

 

The svg approach suggested by Marc looks correct (big thanks!). It's not ideal as I have a bunch of custom markers that I need to render however this is a step in the right direction.

 

This issue really needs some attention as i don't really want to spend time working around issues that I expect will be fixed in due course. It does mean it will delay any publishing though which is a shame...

 

Any other suggestions welcome.

 

 

New Contributor
vincentl1
Posts: 8
Registered: ‎01-03-2013
My Device: dev alpha

Re: Google Map Marker corruption

 

have you tried to set  optimized: false in your marker options ?

 

Developer
jplust
Posts: 44
Registered: ‎12-17-2012
My Device: Bold 9900, PlayBook, DevAlphaC, Z10LE

Re: Google Map Marker corruption

[ Edited ]

@vincentl1: that solve it!!!! thanks!but what was the error without the marker option?!

BlackBerry Development Advisor
chadtatro
Posts: 620
Registered: ‎10-01-2009
My Device: Z10

Re: Google Map Marker corruption

Not seeing this behavior on my phone, but I'll keep an eye on it.

 

Glad that someone has found a solution.  Best community ever :smileywink:

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Contributor
pfazzino
Posts: 12
Registered: ‎01-16-2013
My Device: BB10 Dev Alpha

Re: Google Map Marker corruption

[ Edited ]

Thanks vincentl1, it's a great suggestion and solves the position issue but the marker size is affected as a result (not to mention potential perf implications if you have a lot of markers)

 

compare bb

 

https://www.dropbox.com/s/ryibhzsxxgimfew/bbmap.png

 

to same page on android

 

https://www.dropbox.com/s/wo7yn7ekc59k5dn/androidmap.png

 

So looks like the rendering is not scaling the marker and taking into account the bb ppi. Thoughts? gmap bug?