Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps Android API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps Android API
  3. Crear claves correspondientes
Continuar

Formas

La Google Maps API for Android ofrece maneras simples de agregar formas a tus mapas para personalizarlos en tu aplicación.

  • Una Polyline es una serie de segmentos de líneas conectados que pueden formar cualquier forma y pueden emplearse para marcar trazados y rutas en el mapa.
  • Un Polygon es una forma delimitada que puede emplearse para marcar áreas del mapa.
  • Un Circle es una proyección geográficamente precisa de un círculo de la superficie terrestre dibujado en el mapa.

Puedes personalizar el aspecto de todas estas formas modificando algunas propiedades.

Ejemplos de códigos

En el repositorio de ApiDemos de GitHub se incluyen ejemplos en los cuales se muestran el uso de las formas y sus funciones:

Polilíneas

La clase Polyline define un conjunto de segmentos de líneas conectados en el mapa. Un objeto Polyline consiste en un conjunto de ubicaciones de LatLng y crea una serie de segmentos de líneas que conectan dichas ubicaciones en una secuencia ordenada.

En el video siguiente, se proporcionan ideas relacionadas con la manera en que tus usuarios llegan a donde se dirigen usando polilíneas para dibujar un trazado en el mapa.

Para crear un objeto Polyline, primero debes crear un objeto PolylineOptions y agregarle puntos. Los puntos representan un lugar de la superficie terrestre y se expresan como un objeto LatLng. El dibujo de segmentos de línea se establece entre puntos según el orden en el que los agregues al objeto PolylineOptions. Para agregar puntos a un objeto PolylineOptions, llama a PolylineOptions.add(). Ten en cuenta que este método toma un número variable de parámetros para que puedas agregar varios puntos a la vez (también puedes llamar a “PolylineOptions.addAll(Iterable”) si los puntos ya se encuentran en una lista.

Luego puedes agregar la polilínea a un mapa llamando a GoogleMap.addPolyline(PolylineOptions). El método devuelve un objeto Polyline con el cual puedes modificar la polilínea posteriormente.

En el fragmento de código siguiente se muestra la manera de agregar un rectángulo a un mapa:

// Instantiates a new Polyline object and adds points to define a rectangle
PolylineOptions rectOptions = new PolylineOptions()
        .add(new LatLng(37.35, -122.0))
        .add(new LatLng(37.45, -122.0))  // North of the previous point, but at the same longitude
        .add(new LatLng(37.45, -122.2))  // Same latitude, and 30km to the west
        .add(new LatLng(37.35, -122.2))  // Same longitude, and 16km to the south
        .add(new LatLng(37.35, -122.0)); // Closes the polyline.

// Get back the mutable Polyline
Polyline polyline = myMap.addPolyline(rectOptions);

Para modificar la forma de la polilínea una vez agregada, puedes llamar a Polyline.setPoints() y proporcionar una nueva lista de puntos para la polilínea.

Puedes personalizar el aspecto de la polilínea antes y después de agregarla al mapa. Para obtener información más detallada, consulta la sección sobre personalización de aspectos a continuación.

Eventos de polilínea

De forma predeterminada, no se puede hacer clic en las polilíneas. Puedes habilitar e inhabilitar la admisión de clics llamando a Polyline.setClickable(boolean).

Usa un OnPolylineClickListener para detectar eventos de clics en una polilínea que admita clics. Para configurar este receptor, llama a GoogleMap.setOnPolylineClickListener(OnPolylineClickListener). Cuando un usuario haga clic en una polilínea, recibirás un callback onPolylineClick(Polyline).

Polígonos

Los objetos Polygon se asemejan a los objetos Polyline en que constan de una serie de coordenadas que forman una secuencia ordenada. Sin embargo, en lugar de ser abiertos, los polígonos están diseñados para definir regiones dentro de un bucle cerrado con el interior relleno.

Puedes agregar un objeto Polygon al mapa de la misma manera en que agregarías un objeto Polyline. Primero, crea un objeto PolygonOptions y agrégale puntos. Estos puntos conformarán el contorno del polígono. Luego, debes agregar el polígono al mapa llamando a GoogleMap.addPolygon(PolygonOptions), con lo cual se devolverá un objeto Polygon.

Con el fragmento de código siguiente se agrega un rectángulo a un mapa (ten en cuenta que, debido a que no se define un color de relleno y el color de llenado predeterminado es transparente, el aspecto será exactamente el mismo que el de la polilínea a partir del fragmento de código de la sección anterior):

// Instantiates a new Polygon object and adds points to define a rectangle
PolygonOptions rectOptions = new PolygonOptions()
              .add(new LatLng(37.35, -122.0),
                   new LatLng(37.45, -122.0),
                   new LatLng(37.45, -122.2),
                   new LatLng(37.35, -122.2),
                   new LatLng(37.35, -122.0));

// Get back the mutable Polygon
Polygon polygon = myMap.addPolygon(rectOptions);

Para modificar la forma del polígono una vez agregado, puedes llamar a Polygon.setPoints() y proporcionar una nueva lista de puntos para el contorno del polígono.

Puedes personalizar el aspecto del polígono antes y después de agregarlo al mapa. Para obtener información más detallada, consulta la sección sobre personalización de aspectos a continuación.

Autocompletado de polígonos

El objeto Polygon del ejemplo anterior consta de cinco coordenadas, pero debes tener en cuenta que la primera y última corresponden a la misma ubicación, la cual define el bucle. Debido a que los polígonos definen áreas cerradas, sin embargo, en la práctica no necesitas definir esta última coordenada. Si la última coordenada difiere de la primera, la API “cerrará” el polígono automáticamente adjuntando la primera coordenada al final de la secuencia de coordenadas.

Los primeros dos polígonos son equivalentes, y al llamar a cada uno de ellos polygon.getPoints() se mostrarán los 4 puntos.

Polygon polygon = map.addPolygon(new PolygonOptions()
        .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(0, 0))
        .strokeColor(Color.RED)
        .fillColor(Color.BLUE));

Polygon polygon = map.addPolygon(new PolygonOptions()
         .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5))
         .strokeColor(Color.RED)
         .fillColor(Color.BLUE));

Crear un objeto Polygon hueco

Se pueden combinar varios trazados en un único objeto Polygon para crear formas complejas, como los aros con relleno, o “anillos” (en las cuales las áreas poligonales aparecen dentro del polígono como “islas”). Las formas complejas siempre están compuestas por varios trazados más simples.

Dos trazados deben definirse en la misma área. La más grande de las dos regiones define el área de relleno y es un polígono simple sin opciones adicionales. Puedes pasar un segundo trayecto al método addHole(). Cuando el primer trazado delimite al segundo y más pequeño, aparecerá como si se hubiera eliminado parte del polígono. Si el orificio forma una intersección con el contorno del polígono , se representará este último sin relleno.

A través del fragmento de código siguiente se crea un rectángulo con un orificio rectangular más pequeño.

mMap.addPolygon(new PolygonOptions()
        .add(new LatLng(0, 0), new LatLng(0, 5), new LatLng(3, 5), new LatLng(3, 0), new LatLng(0, 0))
        .addHole(new LatLng(1, 1), new LatLng(1, 2), new LatLng(2, 2), new LatLng(2, 1), new LatLng(1, 1))
        .fillColor(Color.BLUE));

Eventos de polígono

De forma predeterminada, no se puede hacer clic en los polígonos. Puedes habilitar e inhabilitar la admisión de clics llamando a Polygon.setClickable(boolean).

Usa un OnPolygonClickListener para detectar eventos de clics en una polilínea que admita clics. Para configurar este receptor, llama a GoogleMap.setOnPolygonClickListener(OnPolygonClickListener). Cuando un usuario haga clic en un polígono, recibirás un callback onPolygonClick(Polygon).

Círculos

Además de una clase Polygon genérica, en la Google Maps API se incluyen clases específicas para objetos Circle a fin de simplificar su construcción.

Para construir un círculo, debes especificar las dos propiedades siguientes:

  • center como un LatLng;
  • radius en metros.

Por lo tanto, se define a un círculo como el conjunto de todos los puntos de la superficie terrestre que se encuentran a radius metros del objeto center. Debido a la manera en que la proyección Mercator empleada por la Google Maps API representa una esfera en una superficie plana, esta aparecerá casi como un círculo perfecto en el mapa cuando se encuentre cerca del ecuador y perderá cada vez más la forma circular (en la pantalla) a medida que el círculo se aleje del ecuador.

En el fragmento de código siguiente se agrega un círculo al mapa construyendo un objeto CircleOptions y llamando a GoogleMap.addCircle(CircleOptions):

// Instantiates a new CircleOptions object and defines the center and radius
CircleOptions circleOptions = new CircleOptions()
    .center(new LatLng(37.4, -122.1))
    .radius(1000)); // In meters

// Get back the mutable Circle
Circle circle = myMap.addCircle(circleOptions);

Para modificar la forma del círculo una vez agregado, puedes llamar a Circle.setRadius() o Circle.setCenter() y proporcionar nuevos valores.

Puedes personalizar el aspecto del círculo antes y después de agregarlo al mapa. Para obtener información más detallada, consulta la sección sobre personalización de aspectos a continuación.

Eventos de círculo

De forma predeterminada, no se puede hacer clic en los círculos. Puedes habilitar e inhabilitar la admisión de clics llamando a GoogleMap.addCircle() con CircleOptions.clickable(boolean), o bien a Circle.setClickable(boolean).

Usa un OnCircleClickListener para detectar eventos de clics en un círculo que admita clics. Para configurar este receptor, llama a GoogleMap.setOnCircleClickListener(OnCircleClickListener).

Cuando un usuario haga clic en un círculo, recibirás un callback onCircleClick(Circle), como se muestra en el siguiente ejemplo de código:

public class MyActivity extends FragmentActivity
        implements OnMapReadyCallback {

        private GoogleMap mMap;
        private Circle circle;

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

            circle = mMap.addCircle(new CircleOptions()
                .center(new LatLng(37.4, -122.1))
                .radius(1000)
                .strokeWidth(10)
                .strokeColor(Color.GREEN)
                .fillColor(Color.argb(128, 255, 0, 0))
                .clickable(true);

            map.setOnCircleClickListener(new OnCircleClickListener() {

                @Override
                public void onCircleClick(Circle circle) {
                    // Flip the r, g and b components of the circle's
                    // stroke color.
                    int strokeColor = circle.getStrokeColor() ^ 0x00ffffff;
                    circle.setStrokeColor(strokeColor);
                }
            });
        }
}

Cómo personalizar aspectos

Puedes modificar el aspecto de una forma antes de agregarla al mapa (especificando la propiedad deseada en el objeto de opciones) o después de hacerlo. También se exponen captadores para todas las propiedades para que puedas acceder de manera sencilla al estado actual de la forma.

A través del fragmento del código siguiente se agrega una polilínea azul gruesa con segmentos geodésicos desde Melbourne hasta Perth. En las secciones siguientes se explicarán estas propiedades con mayor nivel de detalle.

Polyline line = map.addPolyline(new PolylineOptions()
    .add(new LatLng(-37.81319, 144.96298), new LatLng(-31.95285, 115.85734))
    .width(25)
    .color(Color.BLUE)
    .geodesic(true));

Nota: Aunque la mayoría de estas pueden aplicarse a cualquiera de las formas descritas, es posible que algunas de las propiedades no tengan sentido para determinadas formas (p. ej., un objeto Polyline no puede tener color de relleno porque no tiene área interior).

Color del trazo

El color de trazo es un elemento entero alpha/rojo/verde/azul (ARGB) de 32 bits en el que se especifican la opacidad y el color del grosor de la forma. Configura esta propiedad en el objeto de opciones de la forma llamando a *Options.strokeColor() (o PolylineOptions.color(), si se trata de una polilínea). Si no se especifica, el color de trazo predeterminado es el negro (Color.BLACK).

Una vez que se haya agregado una forma al mapa, se podrá acceder al color de trazo llamando a getStrokeColor() (o getColor(), si se trata de una polilínea) y será posible modificarlo llamando a setStrokeColor() (setColor() for a polyline).

Color del relleno

El color de relleno solo se aplica a polígonos y círculos. No se aplica polilíneas, ya que no tienen áreas interiores definidas. En el caso de un polígono, las áreas interiores de sus orificios no forman parte del interior de este y no se les aplicará color si se configura un color de relleno.

El color de relleno es un elemento entero alpha/rojo/verde/azul (ARGB) de 32 bits en el que se especifican la opacidad y el color del interior de la forma. Configura esta propiedad en el objeto de opciones de la forma llamando a *Options.fillColor(). Si no se especifica, el color de trazo predeterminado es el transparente (Color.TRANSPARENT).

Una vez que se haya agregado una forma al mapa, se podrá acceder al color de relleno llamando a getFillColor() y será posible modificarlo llamando a setFillColor().

Ancho del trazo

Ancho del trazo de la línea, como valor flotante en pixels (px). El ancho no se adapta cuando se aplica zoom al mapa (p. ej., el ancho de trazo de una forma será el mismo con todos los niveles de zoom). Configura esta propiedad en el objeto de opciones de la forma llamando a *Options.strokeWidth() (o PolylineOptions.width(), si se trata de una polilínea). Si no se especifica, el ancho de trazo predeterminado es de 10 píxeles.

Una vez que se haya agregado una forma al mapa, se podrá acceder al ancho de trazo llamando a getStrokeWidth() (o getWidth(), si se trata de una polilínea) y será posible modificarlo llamando a setStrokeWidth() (setWidth() for a polyline).

Segmentos geodésicos

La configuración geodésica se aplica únicamente a polilínea y polígonos. No se aplica a círculos porque estos no se definen como un conjunto de segmentos.

La configuración geodésica determina la manera en que se dibujan los segmentos de líneas entre vértices consecutivos de la polilínea o del polígono. Los segmentos geodésicos son aquellos que siguen el trazado más corto en la superficie terrestre (una esfera) y a menudo aparecen como líneas curvadas en un mapa con proyección Mercator. Los segmentos no geodésicos se dibujan como líneas rectas en el mapa.

Configura esta propiedad en el objeto de opciones de la forma llamando a *Options.geodesic(), donde true indica que los segmentos deben dibujarse como líneas geodésicas y false indica que deben dibujarse como líneas rectas. Si no se especifica, el valor predeterminado es el de segmentos no geodésicos (false).

Una vez que se haya agregado una forma al mapa, se podrá acceder a la configuración geodésica llamando a isGeodesic() y será posible modificarla llamando a setGeodesic().

Índice Z

El índice Z especifica el ordenamiento de pila de esta forma respecto de otras superposiciones (otras formas, superposiciones de suelo y superposiciones de mosaicos) en el mapa. Un superposición con un índice Z alto se dibuja encima de las que tienen índices Z inferiores. Dos superposiciones con el mismo índice Z se dibujan con un ordenamiento arbitrario.

Ten en cuenta que los marcadores siempre se dibujan encima de otras superposiciones, independientemente del índice z de estas.

Configura esta propiedad en el objeto de opciones dela forma llamando a *Options.zIndex(). Si no se especifica, el valor de índice Z predeterminado es 0. Una vez que se haya agregado una forma al mapa, se podrá acceder al índice Zl lamando a getZIndex() y será posible modificarlo llamando a setZIndex().

Visibilidad

La visibilidad especifica si la forma debe dibujarse en el mapa: true indica que debe dibujarse y false indica lo contrario. Permite que no muestres transitoriamente una forma en el mapa. Para eliminar de manera permanente la forma del mapa, llama a remove() en ella.

Configura esta propiedad en el objeto de opciones de la forma llamando a *Options.visible(). Si no se especifica, el valor de visibilidad predeterminado es true. Una vez que se haya agregado una forma al mapa, se podrá acceder al índice Z llamando a isVisible() y será posible modificarlo llamando a setVisible().

Enviar comentarios sobre...

Google Maps Android API
Google Maps Android API
Si necesitas ayuda, visita nuestra página de asistencia.