Play with Google Play Services 3 - Map
If you haven’t set up Google Play services yet, please follow this tutorial.
Get Maps API Key
First, create a project for your app in Google Developers Console, and enable Google Maps Android API v2.
Then get you the signing certificate’s fingerprint:
Then use the SHA-1 fingerprint and your app’s package name to generate a new key for API access from Google Developers Console.
Now update your app’s AndroidManifest.xml file, specifying the permissions, feature required, and the map key:
Add a Map
The easiest way to show a map is to add a
MapFragment (or a
SupportMapFragment for older devices) to your activity. Another approach is to add a
MapView to your activity or fragment.
To add a map view showing satellite maps with an XML file:
Then in your activity:
Once you have the map ready, you can use the
getMap() method (or the
getMapAsync() to get reference to the map asynchronously) of the map view or fragment to get a
GoogleMap object. If this method returns
null, it means the map is not ready yet (e.g. because the Google Play services is not available). It serves as the entry point for interactions with the map:
- To configure the UI, e.g. show / hide my location button, enable / disable gestures, use the
UiSettingsobject fetched using
- To convert between coordinates on the map and the location on the screen, use the
Projectionobject fetched using
- You can uses
GoogleMap.setMyLocationEnabled()method to show or hide the blue dot representing device’s current location, but to get the current location you should follow my previous tutorial on locations.
- To listen to map click events, you can simply set the corresponding listener using
- You can set the camera (i.e. which part of the map should be shown) using the
GoogleMap.animateCamera()(with animation) or
GoogleMap.moveCamera()(no animation) method. To listener to camera changes (e.g. triggered by user), you can specify the corresponding listener using
Also, you can set map types (normal, satellite, etc.), enable / disable indoor maps, 3D buildings, etc. using the
Markers and Info Windows
Markers can be used to indicate locations or other important information on the map, with more detailed information shown in the info window.
The following snippet adds a marker with a custom icon to the map, and displays a default info window showing “Hello, Helsinki!”:
One thing to note when using e.g.
BitmapDescriptorFactory is, you might need to use
MapsInitializer to explicitly initialize the map.
To remove a marker, you can use the
Marker.remove() method, or the
GoogleMap.clear() method to remove all added markers, shapes, etc.
If you want to animate a marker on the map (e.g. use a custom marker to indicate current location instead of the boring blue dot), all you need is simply update its position periodically using the
When the user clicks on a marker, by default it shows an info window with some title and snippet defined when the marker was added. But you can also listen to the click event:
onMarkerClick() method returns true, it means the click event has been consumed. Otherwise, if false is returned, it will execute the default behavior, i.e. moving the camera to the marker, and showing the info window.
To provide a customized info window:
The info window is rendered as an image. It means any subsequent changes won’t be visible unless you re-open the info window, and the info window can only listen to one click event for the whole info window.
Circles, Polygons, and Polylines
To add those shapes to the map, you basically follow the same pattern:
Ground and Tile Overlays
The main difference between these two overlays is: the ground overlay provides a single image for a fixed location on the map, while the tile overlay provides a set of images for different locations at different zoom level on the map.
To add a ground overlay:
To add a tile overlay:
That’s it for today. Happy hacking and keep reading :)