2023 How to Draw Shapes and Overlays on Google Maps SDK

Introduction: Google Maps SDK for Android and iOS provide a powerful set of APIs that enable developers to create highly customizable maps with multiple layers, including overlays and shapes. In this blog post, we will focus on how to draw shapes and overlays on Google Maps SDK. Getting Started: Before we start, make sure that you have installed and set up the Google Maps SDK in your project. You can follow the official guide for Android here (https://developers.google.com/maps/documentation/android-sdk/intro) and for iOS here (https://developers.google.com/maps/documentation/ios-sdk/start). Drawing a Circle or a Polygon: Drawing a circle or a polygon on Google Maps SDK is straightforward. Both require specifying a center point and a radius (in case of a circle) or an array of points (in case of a polygon). Here is a code snippet showing how to draw a circle on Google Maps SDK for Android: ```java // Define a CircleOptions object CircleOptions circleOptions = new CircleOptions() .center(new LatLng(37.4, -122.1)) // Center point of the circle .radius(10000) // Radius of the circle in meters .strokeWidth(5) // Width of the circle's border .strokeColor(Color.RED) // Color of the circle's border .fillColor(Color.BLUE); // Color of the circle's interior // Add the circle to the map Circle circle = googleMap.addCircle(circleOptions); ``` The same can be accomplished on Google Maps SDK for iOS by using the MKCircle class: ```swift // Define a CLLocationCoordinate2D object representing the center point of the circle let center = CLLocationCoordinate2D(latitude: 37.4, longitude: -122.1) // Define an MKCircle object let circle = MKCircle(center: center, radius: 10000) // Customize the circle's border and interior circle.strokeWidth = 5 circle.strokeColor = UIColor.red circle.fillColor = UIColor.blue // Add the circle to the map mapView.addOverlay(circle) ``` To draw a polygon on Google Maps, we define an array of points representing the polygon's vertices. Here is an example showing how to draw a polygon on Google Maps SDK for Android: ```java // Define an array of LatLng objects representing the vertices of the polygon List vertices = new ArrayList<>(); vertices.add(new LatLng(37.3, -122.2)); vertices.add(new LatLng(37.3, -122.0)); vertices.add(new LatLng(37.5, -122.0)); vertices.add(new LatLng(37.5, -122.2)); // Define a PolygonOptions object PolygonOptions polygonOptions = new PolygonOptions() .addAll(vertices) // Add the vertices to the polygon .strokeWidth(5) // Width of the polygon's border .strokeColor(Color.RED) // Color of the polygon's border .fillColor(Color.BLUE); // Color of the polygon's interior // Add the polygon to the map Polygon polygon = googleMap.addPolygon(polygonOptions); ``` The equivalent code on Google Maps SDK for iOS would use the MKPolygon class: ```swift // Define an array of CLLocationCoordinate2D objects representing the vertices of the polygon let vertices = [ CLLocationCoordinate2D(latitude: 37.3, longitude: -122.2), CLLocationCoordinate2D(latitude: 37.3, longitude: -122.0), CLLocationCoordinate2D(latitude: 37.5, longitude: -122.0), CLLocationCoordinate2D(latitude: 37.5, longitude: -122.2), ] // Define an MKPolygon object let polygon = MKPolygon(coordinates: vertices, count: vertices.count) // Customize the polygon's border and interior polygon.strokeWidth = 5 polygon.strokeColor = UIColor.red polygon.fillColor = UIColor.blue // Add the polygon to the map mapView.addOverlay(polygon) ``` Adding Overlays to the Map: In addition to circles and polygons, Google Maps SDK supports other types of overlays, including lines, ground overlays (images overlaid on the map), and markers. Here is how to add a ground overlay to a Google Map in Android: ```java // Define a LatLngBounds object representing the region to overlay LatLngBounds bounds = new LatLngBounds(new LatLng(37.6, -122.3), new LatLng(37.2, -121.9)); // Define a GroundOverlayOptions object GroundOverlayOptions overlayOptions = new GroundOverlayOptions() .image(BitmapDescriptorFactory.fromResource(R.drawable.map_overlay)) // The image to overlay .positionFromBounds(bounds) // The region to overlay .transparency(0.5f); // Transparency of the overlay // Add the overlay to the map GroundOverlay overlay = googleMap.addGroundOverlay(overlayOptions); ``` Here is the equivalent code on Google Maps SDK for iOS: ```swift // Define an MKMapRect object representing the region to overlay let northWest = CLLocationCoordinate2D(latitude: 37.6, longitude: -122.3) let southEast = CLLocationCoordinate2D(latitude: 37.2, longitude: -121.9) let overlayRect = MKMapRect(origin: MKMapPoint(northWest), size: MKMapSize(width: 0, height: 0)).union(MKMapRect(origin: MKMapPoint(southEast), size: MKMapSize(width: 0, height: 0))) // Define an MKGroundOverlay object let overlay = MKGroundOverlay(bounds: overlayRect, icon: UIImage(named: "map_overlay")!) // Customize the overlay overlay.alpha = 0.5 // Add the overlay to the map mapView.addOverlay(overlay) ``` Conclusion: In this blog post, we have learned how to draw shapes and overlays on Google Maps SDK for Android and iOS. We have shown examples of drawing circles, polygons, and ground overlays. Google Maps SDK offers a wide range of customization options, and developers can easily create maps tailored to their needs using the provided APIs.