Friday, January 4, 2013

Google Maps Android API v2 example: Draw Polygon on GoogleMap

Last post demonstrate how to "Draw Polyline on GoogleMap of Google Maps Android API v2", we can draw Polygon using the almost same procedure.

Draw Polygon on GoogleMap


package com.example.androidmapsv2;

import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.GooglePlayServicesUtil;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.OnMapLongClickListener;
import com.google.android.gms.maps.GoogleMap.OnMarkerClickListener;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.GoogleMap.OnMapClickListener;
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.Polygon;
import com.google.android.gms.maps.model.PolygonOptions;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.FragmentManager;
import android.graphics.Color;
import android.location.Location;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity 
 implements OnMapClickListener, OnMapLongClickListener, OnMarkerClickListener{
 
 final int RQS_GooglePlayServices = 1;
 private GoogleMap myMap;
 
 Location myLocation;
 TextView tvLocInfo;
 
 boolean markerClicked;
 PolygonOptions polygonOptions;
 Polygon polygon;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  tvLocInfo = (TextView)findViewById(R.id.locinfo);
  
  FragmentManager myFragmentManager = getFragmentManager();
  MapFragment myMapFragment 
   = (MapFragment)myFragmentManager.findFragmentById(R.id.map);
  myMap = myMapFragment.getMap();
  
  myMap.setMyLocationEnabled(true);
  
  myMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
  
  myMap.setOnMapClickListener(this);
  myMap.setOnMapLongClickListener(this);
  myMap.setOnMarkerClickListener(this);

  markerClicked = false;
 }
 
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
     case R.id.menu_legalnotices:
      String LicenseInfo = GooglePlayServicesUtil.getOpenSourceSoftwareLicenseInfo(
        getApplicationContext());
      AlertDialog.Builder LicenseDialog = new AlertDialog.Builder(MainActivity.this);
      LicenseDialog.setTitle("Legal Notices");
      LicenseDialog.setMessage(LicenseInfo);
      LicenseDialog.show();
         return true;
     }
  return super.onOptionsItemSelected(item);
 }

 @Override
 protected void onResume() {

  super.onResume();

  int resultCode = GooglePlayServicesUtil.isGooglePlayServicesAvailable(getApplicationContext());
  
  if (resultCode == ConnectionResult.SUCCESS){
   Toast.makeText(getApplicationContext(), 
     "isGooglePlayServicesAvailable SUCCESS", 
     Toast.LENGTH_LONG).show();
  }else{
   GooglePlayServicesUtil.getErrorDialog(resultCode, this, RQS_GooglePlayServices);
  }
  
 }

 @Override
 public void onMapClick(LatLng point) {
  tvLocInfo.setText(point.toString());
  myMap.animateCamera(CameraUpdateFactory.newLatLng(point));
  
  markerClicked = false;
 }

 @Override
 public void onMapLongClick(LatLng point) {
  tvLocInfo.setText("New marker added@" + point.toString());
  myMap.addMarker(new MarkerOptions().position(point).title(point.toString()));
  
  markerClicked = false;
 }

 @Override
 public boolean onMarkerClick(Marker marker) {
  
  if(markerClicked){
   
   if(polygon != null){
    polygon.remove();
    polygon = null;
   }
   
   polygonOptions.add(marker.getPosition());
   polygonOptions.strokeColor(Color.RED);
   polygonOptions.fillColor(Color.BLUE);
   polygon = myMap.addPolygon(polygonOptions);
  }else{
   if(polygon != null){
    polygon.remove();
    polygon = null;
   }
   
   polygonOptions = new PolygonOptions().add(marker.getPosition());
   markerClicked = true;
  }
  
  return true;
 }

}



download filesDownload the files.


Next:
- Implement Draggable Marker

Update:
- Google Maps Android API v2 now support anti-clockwise polygons

The series:
A simple example using Google Maps Android API v2, step by step.

7 comments:

Unknown said...

Hello there, thanks for the tutorial. I was just wandering that is it possible that after making the polygon, a event could be generated or a function is invoked that zoom in into the polygon. What I mean to say is that could this creation of polygon be used as selection ( since it is not supported in v2 but v3 has a feature of rectangular selection).

Any help would be highly regarded.

Unknown said...

thanks for this tutorial, its really helpful. However, I was figuring out that if there is any way this polygon be used as a custom selection and we could invoke a function or event, lets say"when the polygon is complete, zoom in into the polygon".

Thanks in advance for any sort of help.

Unknown said...

Hi Your code it excellent. I require your help in i want to calculate area of polygon which we create.

mukesh mannu said...

hello ashish chaturvedi, have you got solution for calculating the area of polygon created, plz reply me, I am also in search for that, for a verly long time, but have not found any solution upto this time.

Unknown said...

can i see the xml Layout ?

Erik said...

hello Sylvi Evelyn,

refer: Using MapFragment instead of SupportMapFragment.

Unknown said...

it is possible to add more than 5 cordinate in polygon..means if i wnat to use multiple cordinate then what should be do?