LanguagesXMLHow To Draw Objects on Google Maps

How To Draw Objects on Google Maps

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

Google Maps provides the programmatic ability to draw objects on the maps, such as lines and circles. This can be useful to demonstrate paths, or mark areas that might be impacted by any event like a music concert.

We can draw polygons, lines, and circles on the maps. We use the PolylineOptions and CircleOptions classes to describe the shapes and then add them to the map by using the Map.addPolyLine and Map.addCircle APIs.

Hands On

Let us continue our tryst with Google Maps that we started earlier. In earlier articles, we learned how to set up the development environment, draw a simple map, geocode an address, and work with map markers. In this hands on, we will draw objects on the maps.

Continue working on the same project files you have used before.

Create a new Blank Activity called DrawObjectsActivity.

Draw
Figure 1: The new Blank activity

This will create a layout file named activity_draw_objects.xml.

Change the default contents of the layout file activity_draw_objects.xml to what is shown in the following code segment.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns_android="http://schemas.android.com/
      apk/res/android"
   xmlns_tools="http://schemas.android.com/tools"
   android_layout_width="match_parent"
   android_layout_height="match_parent"
   android_paddingLeft="@dimen/activity_horizontal_margin"
   android_paddingRight="@dimen/activity_horizontal_margin"
   android_paddingTop="@dimen/activity_vertical_margin"
   android_paddingBottom="@dimen/activity_vertical_margin"
   android_orientation="vertical"
   tools_context="com.example.vipulp.myapplication.
      DrawObjectsActivity">


   <LinearLayout
      android_layout_width="match_parent"
      android_layout_height="wrap_content"
      android_orientation="horizontal">

      <Button
         android_layout_width="71dp"
         android_layout_height="wrap_content"
         android_text="Draw markers"
         android_id="@+id/button3"
         android_onClick="drawMarkers" />

      <Button
         android_layout_width="71dp"
         android_layout_height="wrap_content"
         android_text="Draw Line"
         android_id="@+id/button"
         android_onClick="drawLine" />

      <Button
         android_layout_width="wrap_content"
         android_layout_height="wrap_content"
         android_text="Draw Circle"
         android_id="@+id/button2"
         android_onClick="drawCircle" />

   </LinearLayout>

   <fragment xmlns_android="http://schemas.android.com/
         apk/res/android"
      android_id="@+id/map"
      android_name="com.google.android.gms.maps.
         SupportMapFragment"
      android_layout_width="match_parent"
      android_layout_height="fill_parent" />
</LinearLayout>

In the preceding layout file, we are adding three buttons. The first one will add markers on the Statue of Liberty and New York, the second button is intended to draw a line between the markers when it is clicked, and the third button, when clicked, will draw a circle around Marker 1.

In the code file for the activity, DrawObjectsActivity.java, include the following import statements.

import android.view.View;

import com.google.android.gms.maps.CameraUpdate;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.Circle;
import com.google.android.gms.maps.model.CircleOptions;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.maps.model.PolylineOptions;
import java.io.IOException;

Next, change the class definition to the following:

public class DrawObjectsActivity extends FragmentActivity
   implements OnMapReadyCallback {

Add class variables for map and markers.

GoogleMap mMap;
Marker m1, m2;

Modify the default onCreate method to initialize the map variable.

protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_draw_objects);
   SupportMapFragment mapFrag = (SupportMapFragment)
      getSupportFragmentManager().findFragmentById(R.id.map);
   mMap = mapFrag.getMap();

}

Implement the onMapReady callback method.

@Override
   public void onMapReady(final GoogleMap map) {
      this.mMap = map;

   }

Lastly, we implement the click event handler for the buttons.

public void drawMarkers(View v) throws IOException {

   LatLng coordinate = new LatLng(40.71850, -74.01431);
   CameraUpdate yourLocation =
      CameraUpdateFactory.newLatLngZoom(coordinate, 10);
   mMap.animateCamera(yourLocation);
   MarkerOptions markerOptions1 = new MarkerOptions()
      .title("Statue of liberty")
      .position(new LatLng(40.688641, -74.043968));
   if(m1 != null)
      m1.remove();
   if(m2 != null)
      m2.remove();
   m1 = mMap.addMarker(markerOptions1);
   MarkerOptions markerOptions2 = new MarkerOptions()
      .title("Empire State Building")
      .position(new LatLng(40.748371,-73.984642));
   m2 = mMap.addMarker(markerOptions2);
}

To draw the line, we use the PolylineOptions class, as shown in the following drawLine method.

public void drawLine(View v) throws IOException {
   PolylineOptions options = new PolylineOptions()
      .add(m1.getPosition())
      .add(m2.getPosition());
   mMap.addPolyline(options);
}

Finally, we draw the circle by using the CircleOptions class.

public void drawCircle(View v) throws IOException {
   CircleOptions circleOptions = new CircleOptions()
      .center(m1.getPosition())
      .radius(1500)
      .fillColor(0x220000DD);
   mMap.addCircle(circleOptions);

}

Our application is now ready. When we run this application and click the button to draw the markers, the map centers in on New York and adds a couple of markers: one for the Empire State Building and the other for the Statue of Liberty. When we click the Draw Lines and Draw Circle buttons, we draw the objects on the map.

Summary

In this article, we learned how to draw objects on Google Maps programmatically. I hope you have found this information useful.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories