The document explains how to set up map components in a coding environment, detailing the installation of maps and the configuration of API keys for Android, iOS, and JavaScript. It highlights the difference in appearance between Open Street Map and the Google Maps provider, and provides solutions for issues that arise specifically in iOS builds, including handling unsupported web browsers. The included code snippets illustrate the implementation of these features effectively.

1. Maps - Part II
Now that we have maps installed and have the keys lets proceed to the hello world stage

2. public void start() {
if(current != null){
current.show();
return;
}
Form mapDemo = new Form("Maps", new BorderLayout());
MapContainer mc = new MapContainer();
mapDemo.add(CENTER, mc);
mapDemo.show();
}
Hello World
The obvious hello world is this thing we just create MapContainer and show it…
This looks awful!
That is the MapComponent with open street map. It takes a while to load and isn’t exactly attractive.

3. public void start() {
if(current != null){
current.show();
return;
}
Form mapDemo = new Form("Maps", new BorderLayout());
MapContainer mc = new MapContainer(JS_API_KEY);
mapDemo.add(CENTER, mc);
mapDemo.show();
}
Better Hello World
So lets add the JavaScript key to the constructor so the fallback will be the JavaScript maps instead of Open Street Maps.
This looks more familiar and modern, now we could use the Google Map provider with Map Component which might improve the look of that component a bit but I don’t
see a reason to dwell on that when we can just use the JavaScript fallback. In the past before the z-order peers that made some sense but it no longer does.

4. Build Hints
© Codename One 2017 all rights reserved
Android Settings
android.xapplication=<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value=“YOUR_ANDROID_API_KEY"/>
Now lets configure the build hints for the individual OS settings. First the Android native maps API key needs to be specified using this exact syntax. You can copy and
paste it from the maps github page where all of these keys are listed. Don’t forget to replace YOUR_ANDROID_API_KEY with the key you generated in the URL’s I
mentioned in the previous module

5. Build Hints
© Codename One 2017 all rights reserved
iOS Settings
ios.afterFinishLaunching=[GMSServices
provideAPIKey:@"YOUR_IOS_API_KEY"];
Next we need to do that same thing for iOS and specify the iOS key in this build hint

6. Build Hints
© Codename One 2017 all rights reserved
JavaScript Settings
javascript.googlemaps.key=YOUR_JAVASCRIPT_API_KEY
And last but not least we need the JavaScript key too. Normally, this isn’t essential since we pass the JavaScript key in the constructor. We need this for the JavaScript
port where the key needs to be specified in another location

7. Android Device
© Codename One 2017 all rights reserved
Building this to native Android produces this result on the device

8. iOS Device
© Codename One 2017 all rights reserved
However, the iOS build fails!!!
Looking at the build error it’s clear there was a null pointer exception when running the application but this is an error from the build server…
As you might recall, iOS native applications need a splash screen. The Codename One build server solves this by running the application several times in the servers
where it generates splash screens for us. However, the build servers don’t support the web browser component. The reason for this is simple… The web browser
Component will look different on the device and so a screenshot won’t work well. The solution is to handle a case where a web browser isn’t supported

9. public void start() {
if(current != null){
current.show();
return;
}
Form mapDemo = new Form("Maps", new BorderLayout());
if(BrowserComponent.isNativeBrowserSupported()) {
MapContainer mc = new MapContainer(JS_API_KEY);
mapDemo.add(CENTER, mc);
} else {
// iOS Screenshot process...
mapDemo.add(CENTER,
new Label("Loading, please wait...."));
}
mapDemo.show();
}
iOS Screenshot Process
This fix is relatively trivial, if web browser isn’t supported it has to be the iOS screenshot mode and in this case we can just mention that we are loading. A nice graphic
might be relevant here if we want to refine this further.

10. iOS Device
© Codename One 2017 all rights reserved
And now that this was built it looks like this in iOS!