[Google Maps Mobile] Map is grey until start scrolling

[Google Maps Mobile] Map is grey until start scrolling

  
Forge Component
(5)
Published on 21 Jul by OutSystems Labs
5 votes
Published on 21 Jul by OutSystems Labs

Hi,

We have google map on a web block under inside tabs. When the map tab is active the map seems to load as the controls appear and google logo but the map itself is totally grey. It becomes ok when start touch and scroll. Why this happens and how we can fix this?

Thank you

Mykola Tkachenko wrote:

Hi,

We have google map on a web block under inside tabs. When the map tab is active the map seems to load as the controls appear and google logo but the map itself is totally grey. It becomes ok when start touch and scroll. Why this happens and how we can fix this?

Thank you

Hello Mikola,

I tried to reproduce what you are explaining and I didn't have the grey behavior. In attach I sent you my OML with the test that I've done. Could you give me more details about what are you trying to do?

For example: Which parameter do you have on the map? Are you using OnInitialize, OnReady or OnRender events from the block to assign parameters to the map? Can you reproduce that behavior on the browser? Is this happening on IOS and Android devices? 


Cheers,

Magda Pereira

Hi Magda,

Thank you very much for reply and example. In our app we have block resizing to set it height to 100% and add  markers via JS (see attached oml). I couldn't yet replicate the bug completely but on browser test after adding one marker with js I have a grey line as like the map is not loaded but it become ok when start scrolling. I suspect with lots of js markers it can escalate (will do more test later).

I understand that using js to add markers may not the best approach as there is native markers list and markers events, but I've have trouble keeping this two lists in sync. As for each marker I need a specific event (sending some Id it shows specific block on the page with marker info) and we have filters on the map to update/filter this lists and I'm not sure how to connect markers to events other way then by position on the list that is not reliable.

Example of marker code:


var gMap2 = osGoogleMap.getMap($parameters.MapId).gMap;

 var marker = new google.maps.Marker({
    map: gMap2,
    position: {lat: $parameters.lat, lng: $parameters.lng},
     icon: {      
           size: new google.maps.Size(42,50),
           scaledSize: new google.maps.Size(42,50),
           origin: new google.maps.Point(0,0),
           url: $parameters.Image,
           anchor: new google.maps.Point(0,25)}
  });

 marker.addListener('click', function(){
        console.log('clicked',$parameters.UserId);
        $(".map-info-block").hide();
        $(".map-info-block[data-userId="+$parameters.UserId+"]").show();
 });



Thank you.


Cheers,

Nick

Hello Mykola,

I really would like to help you doing this in the right way. Did you already read this post? It explains very well how you can to connect markers to events.

I opened the module that you gave me and I couldn't reproduce the grey behavior.

Cheers,

Magda Pereira

Hi Mykola,

Please follow the instructions that Magda gave you regarding attaching events to markers as a first step. I would also recommend that you try to use the map inputs, instead of adding the markers yourself through javascript. 

If you need to use javascript, try to create a bound and then add the markers to the map and to the bound, after adding the markers do a map fit to bounds for the bound you created.


Let me know if this helps,


Thanks,

Hugo