Codenameone MapComponent issue

[Chika Agbo]

 public class Mappings extends Form {

    

    private static final String HTML_API_KEY = "AIzaSyCidCg-EmM20JA-a3lcwhPreepEkXCxe7k";

    

    

    

    

 

    public Mappings(){

          setLayout(new BorderLayout());

          final MapContainer cnt = new MapContainer(HTML_API_KEY);

          

          Button btnMoveCamera = new Button("Move Camera");

        btnMoveCamera.addActionListener(e->{

            cnt.setCameraPosition(new Coord(-33.867, 151.206));

        });

        

        

        Style s = new Style();

        s.setFgColor(0xff0000);

        s.setBgTransparency(0);

        FontImage markerImg = FontImage.createMaterial(FontImage.MATERIAL_PLACE, s, Display.getInstance().convertToPixels(3));

        

        

         Button btnAddMarker = new Button("Add Marker");

        btnAddMarker.addActionListener(e->{

            cnt.setCameraPosition(new Coord(41.889, -87.622));

            cnt.addMarker(

                    EncodedImage.createFromImage(markerImg, false),

                    cnt.getCameraPosition(),

                    "Hi marker",

                    "Optional long description",

                     evt -> {

                             ToastBar.showMessage("You clicked the marker", FontImage.MATERIAL_PLACE);

                     }

            );

        });

        

        

        

        

        cnt.addTapListener(e->{

            TextField enterName = new TextField();

            Container wrapper = BoxLayout.encloseY(new Label("Name:"), enterName);

            InteractionDialog dlg = new InteractionDialog("Add Marker");

            dlg.getContentPane().add(wrapper);

            enterName.setDoneListener(e2->{

                String txt = enterName.getText();

                cnt.addMarker(

                        EncodedImage.createFromImage(markerImg, false),

                        cnt.getCoordAtPosition(e.getX(), e.getY()),

                        enterName.getText(),

                        "",

                        e3->{

                                ToastBar.showMessage("You clicked "+txt, FontImage.MATERIAL_PLACE);

                        }

                );

                dlg.dispose();

            });

            dlg.showPopupDialog(new Rectangle(e.getX(), e.getY(), 10, 10));

            enterName.startEditingAsync();

        });

        

        

        

        

         Container root = LayeredLayout.encloseIn(

                BorderLayout.center(cnt),

                BorderLayout.south(

                        FlowLayout.encloseBottom(btnMoveCamera, btnAddMarker)

                )

        );

         

         

        add(BorderLayout.CENTER, root);

        

        

    }

the code above is what I used an when I run it inside emulator it could not load map say that I should see javascript  console. 

I attached the screen shot of the error. 

[Shai Almog]

Look at the console to see if an error is printed there.

BTW Please don't attach camera photos.