Cohort+Problem+7+-+Self-Study

=Note=

This section contains links to self-study materials on **Google Maps API** and **Firebase** (bottom of page).

=Google Maps API=

From Tutorial
An excellent starter code is given at the Google Maps API tutorial web page.

Using Android Studio
The same starter code is also automatically given by android studio.

Make sure Google Play Services are installed
Press Shift twice and enter SDK manager. In the SDK Manager, select SDK tools. Then ensure that the checkboxes beside the Google Play items are selected.

Get the API key
Instructions to sign up for the API key here. You may ignore the part about restriction.

Initial Starter Code
Let's generate the starter code using Android studio. Create a new project and accept all the defaults. When you are asked to choose a new Activity, select "Google Maps Activity". Add the API Key to the android manifest. You can run your app and it should display a marker located at Sydney.

Looking at the starter code
You recall that fragments are specially-designed reusable parts of the UI and can be added or remove. They have their own lifecycle.

Our MapActivity extends the FragmentActivity class. This is an Activity that allows fragments to be included in it and is included to allow your app to run on older versions of Android. More details here.

Our MainActivity implements the OnMapReadyCallback interface, which is an interface with one method onMapReady, which is called when the map is ready to be used.

Every fragment has a fragment manager internally, which is called by the following code, and it gets a reference to the id of the fragment in the layout. Subsequently, getMapAsync helps you to define the callback object that will be triggered when the map is ready to be used.

In onMapReady, you will then see code that places a marker for a particular Latitude/Longitude and also sets the properties of the map view.

Making Modifications
In this case, we'll modify our app to have an edit text widget and a button.

Here's my layout.

code format="xml"  





 code

Here's MapsActivity. See comments below for what you need to do. You'll need the reference to the CameraUpdateFactory.

code format="java" public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

//TODO 1.1 - add these instance variables private GoogleMap mMap; private Marker marker;

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_maps); // Obtain the SupportMapFragment and get notified when the map is ready to be used. SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager .findFragmentById(R.id.map); mapFragment.getMapAsync(this); }

/**    * Manipulates the map once available. * This callback is triggered when the map is ready to be used. * This is where we can add markers or lines, add listeners or move the camera. In this case, * we just add a marker near Sydney, Australia. * If Google Play services is not installed on the device, the user will be prompted to install * it inside the SupportMapFragment. This method will only be triggered once the user has * installed Google Play services and returned to the app. */   @Override public void onMapReady(GoogleMap googleMap) {

mMap = googleMap;

// Add a marker in Sydney and move the camera LatLng sydney = new LatLng(-34, 151);

// TODO 1.2 modify the following line so that the marker is stored in the instance variable mMap.addMarker(new MarkerOptions.position(sydney).title("Marker in Sydney"));

mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney)); }

public void whenClick(View view){

Geocoder geocoder; List addresses;

geocoder = new Geocoder(this, Locale.getDefault);

try{

//TODO 2.1 - query the addresses of changi airport using the getFromLocationName method of geocoder

//TODO 2.2 - get the latitude and longitude from the 0-th elements of the List object

//TODO 2.3 - set up a new LatLng object

//TODO 2.4 - use the setPosition method of the marker object to move the marker

//TODO 2.5 - use the moveCamera method of mMap to move the view

//TODO 2.6 - similarly, set an appropriate zoom level

}catch(Exception ex){ ex.printStackTrace; }

} }

code

Going Further
Try some or all of the following
 * put more than one marker
 * add labels to each marker
 * give the appropriate zoom level to the map
 * connect the markers with lines

=Firebase=

An excellent online course Firebase over a weekend is given at Udacity.

The first two days of the course will be sufficient.

You'll also have to be aware of how to structure your firebase database. It is completely different from a relational database.