Eso es todo.

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

Activar la Google Maps JavaScript 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 JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Capa (biblioteca) de dibujo

  1. Información general
  2. Cómo usar la biblioteca
  3. Opciones de DrawingManager
  4. Cómo actualizar el control de herramientas de dibujo
  5. Eventos de dibujo

Información general

La clase DrawingManager proporciona a los usuarios una interfaz para que dibujen polígonos, rectángulos, polilíneas, círculos y marcadores en el mapa.

Cómo usar la biblioteca

Las herramientas de dibujo constituyen una biblioteca independiente separada del código de JavaScript de la Google Maps API principal. Para usar la funcionalidad contenida en esta biblioteca, primero debes cargarla usando el parámetro libraries en la URL de arranque de Maps API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

Una vez que agregues el parámetro de bibliotecas, puedes crear un objeto DrawingManager de la siguiente manera:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Opciones de DrawingManager

El constructor DrawingManager toma un conjunto de opciones que definen un conjunto de controles que se mostrarán, la posición del control y el estado inicial del dibujo.

  • La propiedad drawingMode de DrawingManager define el estado inicial del dibujo de DrawingManager. Acepta una constante google.maps.drawing.OverlayType. El valor predeterminado es null. En este caso, el cursor se encuentra en un modo no habilitado para dibujar cuando se inicializa DrawingManager.
  • La propiedad drawingControl de DrawingManager define la visibilidad de la interfaz de selección de herramientas de dibujo en el mapa. Acepta un valor booleano.
  • También puedes definir la posición del control y los tipos de superposiciones que deben representarse en el control usando la propiedad drawingControlOptions de DrawingManager.
    • position define la posición del control de dibujo en el mapa, y acepta una constante google.maps.ControlPosition.
    • drawingModes es un conjunto de constantes google.maps.drawing.OverlayType y define los tipos de superposiciones que deben incluirse en el seleccionador de formas del control de dibujo. El icono de la mano siempre estará presente. Esto permitirá al usuario interactuar con el mapa sin dibujar. El orden de las herramientas en el control coincidirá con el orden en que estas se declaren en el conjunto.
  • A cada tipo de superposición puede asignarse un conjunto de propiedades predeterminadas que definen el aspecto de la superposición cuando se crea por primera vez. Estas se definen en la propiedad {overlay}Options de la superposición ({overlay} representa el tipo de superposición). Por ejemplo, las propiedades de relleno de un círculo y trazo, zIndex y la posibilidad de aplicar clics pueden definirse con la propiedad circleOptions. Si se pasan valores de tamaño, ubicación o mapas, estos se ignorarán. Para obtener información completa sobre las propiedades que pueden configurarse, consulta la documentación de referencia de API.

Nota: Para hacer que los usuarios puedan editar una forma después de su creación, fija el valor de su propiedad editable en true.

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

Ver el ejemplo (drawing-tools.html).

Cómo actualizar el control de herramientas de dibujo

Una vez creado el objeto DrawingManager, puedes actualizarlo llamando a setOptions() y pasando nuevos valores.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Para ocultar o mostrar el control de herramientas de dibujo:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Para eliminar el control de herramientas de dibujo del objeto map:

drawingManager.setMap(null);

Si se oculta el control de dibujo, no se muestra el control de las herramientas de dibujo. No obstante, la funcionalidad de la clase DrawingManager permanecerá disponible en su totalidad. De esta manera, puedes implementar tu propio control si lo deseas. Si se elimina DrawingManager del objeto map, se deshabilita por completo la funcionalidad de dibujo. Será necesario volver a adjuntar al mapa con drawingManager.setMap(map), o un nuevo objeto DrawingManager construido, en caso de que deban restaurarse las funciones de dibujo.

Eventos de dibujo

Cuando se crea una superposición de forma, se activan dos eventos:

  • Un evento {overlay}complete (en el cual {overlay} representa el tipo de superposición, como circlecomplete, polygoncomplete, etc.). Se pasa una referencia a la superposición como argumento.
  • Un evento overlaycomplete. Se pasan un literal de objeto, que contiene OverlayType, y una referencia a la superposición como argumento.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

Ten en cuenta que los eventos google.maps.Map, click click y mousemove se deshabilitan cuando se dibuja en el mapa.

Enviar comentarios sobre...

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