facebook.com/ahmed.e.hassan 1
ANDROID DEVELOPMENT
SESSION 6 – GOOGLE MAPS V2, GPS LOCATIONAHMED EZZ EL - DIN
facebook.com/ahmed.e.hassan 2
SESSION CONTENT• Downloading Google Play Services• Google Maps API key• Placing a Marker• Changing Marker Color• Custom Marker Icon• Moving camera to location with animation• Changing Map Type• Current Location• Zooming Buttons and Functionality• Compass Functionality• My Location Button• Map Rotate Gesture
3
INTRODUCTION
facebook.com/ahmed.e.hassan
Google Maps v1 not working anymore, welcome V2.
Before starting a new project, we need to go through some pre required steps.
• Downloading Google Play Services• Getting the Google Maps API key
facebook.com/ahmed.e.hassan 4
DOWNLOADING GOOGLE PLAY SERVICES
facebook.com/ahmed.e.hassan 5
DOWNLOADING GOOGLE PLAY SERVICES
Add google maps dependencies to your project:
Open your Project using ‘Android Studio’ -> Gradle Scripts -> build.gradle (Module:app): and Add the Following:
http://gradleplease.appspot.com/To Know the latest from Google Play Services:
facebook.com/ahmed.e.hassan 6
GOOGLE MAPS API KEYwe need to generate SHA-1 fingerprint using java keytool. Open your terminal and execute the following command to generate SHA-1 fingerprint.
On Windowskeytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
On Linux or Mac OS
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
facebook.com/ahmed.e.hassan 7
GOOGLE MAPS API KEY
facebook.com/ahmed.e.hassan 8
GOOGLE MAPS API KEYNow open Google API Console-> https://console.developers.google.com/
facebook.com/ahmed.e.hassan 9
GOOGLE MAPS API KEY
facebook.com/ahmed.e.hassan 10
GOOGLE MAPS API KEY
facebook.com/ahmed.e.hassan 11
PLACING MARKERYou can place a marker on the map by using following code.
// latitude and longitudedouble latitude = ;double longitude = ;
// create markerMarkerOptions marker = new MarkerOptions().position(new LatLng(latitude, longitude)).title("Hello Maps "); // adding markergoogleMap.addMarker(marker);
facebook.com/ahmed.e.hassan 12
CHANGING MARKER COLORBy default map marker color will be RED. Google maps provides some set of predefined colored icons for the marker.
// ROSE color iconmarker.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)); // GREEN color iconmarker.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));
facebook.com/ahmed.e.hassan 13
CHANGING MARKER COLOR
facebook.com/ahmed.e.hassan 14
CUSTOM MARKER ICONApart from maps native marker icons, you can use own image to show as a marker. You can load the icon from any kind of supported sources.
fromAsset(String assetName) – Loading from assets folderfromBitmap (Bitmap image) – Loading bitmap imagefromFile (String path) – Loading from filefromResource (int resourceId) – Loading from drawable resource
// Changing marker iconmarker.icon(BitmapDescriptorFactory.fromResource(R.drawable.my_marker_icon)));
facebook.com/ahmed.e.hassan 15
MOVING CAMERA TO LOCATION WITH ANIMATION
You may want to move camera to a particular position. Google maps provides set of functions to achieve this.
CameraPosition cameraPosition = new CameraPosition.Builder().target( new LatLng(17.385044, 78.486671)).zoom(12).build(); googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
facebook.com/ahmed.e.hassan 16
CHANGING MAP TYPEGoogle provides 4 kinds of map types Normal, Hybrid, Satellite and Terrain. You can toggle to any kind of map using googleMap.setMapType() method.
facebook.com/ahmed.e.hassan 17
CHANGING MAP TYPE
googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);googleMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);googleMap.setMapType(GoogleMap.MAP_TYPE_NONE);
facebook.com/ahmed.e.hassan 18
SHOWING CURRENT LOCATIONYou can show user’s current location on the map by calling setMyLocationEnabled(). Pass true / false to enable or disable this feature
googleMap.setMyLocationEnabled(true); // false to disable
facebook.com/ahmed.e.hassan 19
ZOOMING BUTTON
You can disable zooming gesture functionality by calling setZoomGesturesEnabled()
googleMap.getUiSettings().setZoomGesturesEnabled(false);
facebook.com/ahmed.e.hassan 20
COMPASS FUNCTIONALITYCompass can be disabled by calling setCompassEnabled() function
googleMap.getUiSettings().setCompassEnabled(true);
facebook.com/ahmed.e.hassan 21
MY LOCATION BUTTONMy location button will be used to move map to your current location. This button can be shown / hidden by calling setMyLocationButtonEnabled() function
googleMap.getUiSettings().setMyLocationButtonEnabled(true);
facebook.com/ahmed.e.hassan 22
MY ROTATE GESTUREMy rotate gesture can be enabled or disabled by calling setRotateGesturesEnabled() method
googleMap.getUiSettings().setRotateGesturesEnabled(true);