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

Controles

Información general sobre los controles

Los mapas que se muestran a través de la Google Maps JavaScript API contienen elementos de la IU que permiten al usuario interactuar con el mapa. Estos elementos se conocen como controles, y puedes incluir variaciones de ellos en tu aplicación. También puedes dejar todo como está y permitir que la Google Maps JavaScript API administre todo el comportamiento de control.

En el siguiente mapa, aparece el conjunto de controles predeterminado que muestra la Google Maps JavaScript API:

Ver el ejemplo (control-default.html)

A continuación, se muestra una lista de todos los conjuntos de controles que puedes usar en tus mapas:

  • En el control de zoom se muestran botones “+” y “-” que permiten cambiar el nivel de zoom del mapa. Este control aparece de manera predeterminada en la esquina inferior derecha del mapa.
  • El control de tipo de mapa se encuentra disponible en una barra de botones de tipo desplegable u horizontal, lo que permite al usuario elegir un tipo de mapa (RUTAS, SATÉLITE, HÍBRIDO o TIERRA). Este control aparece de manera predeterminada en la esquina superior izquierda del mapa.
  • El control Street View contiene un icono del Pegman (hombrecito) que puede arrastrarse hacia el mapa para habilitar Street View. Este control aparece de manera predeterminada cerca de la esquina inferior derecha del mapa.
  • El control de rotación proporciona una combinación de opciones de inclinación y rotación para mapas que contienen imágenes oblicuas. Este control aparece de manera predeterminada cerca de la esquina inferior derecha del mapa. Para obtener más información, consulta Imágenes a 45°.
  • En el control de escala se muestra un elemento de escala de mapa. Este control viene desactivado de manera predeterminada.
  • El control Fullscreen ofrece la opción de abrir un mapa en el modo de pantalla completa. En dispositivos móviles, este control está habilitado de forma predeterminada; en dispositivos de escritorio, está inhabilitado de forma predeterminada. Nota: iOS no admite la función de pantalla completa. Por lo tanto, el control de pantalla completa no puede verse en dispositivos iOS.

No es posible acceder a estos controles de mapas ni modificarlos en forma directa. En lugar de ello, se pueden modificar los campos de MapOptions de un mapa que afectan la visibilidad y la presentación de los controles. Puedes ajustar la presentación de los controles al crear instancias de tu mapa (con los objetos MapOptions correspondientes) o modificar uno en forma dinámica llamando a setOptions() para cambiar sus opciones.

No todos estos controles vienen habilitados de manera predeterminada. Para obtener información sobre el comportamiento predeterminado de la IU (y la manera de modificarlo), consulta La IU predeterminada, a continuación.

La IU predeterminada

En forma predeterminada, todos los controles desaparecen si el mapa es demasiado pequeño (200 x 200 px). Puedes invalidar este comportamiento configurando de manera explícita el control para que sea visible. Consulta Cómo agregar controles al mapa.

El comportamiento y el aspecto de los controles son iguales en dispositivos móviles y de escritorio, a excepción del control de pantalla completa (consulta el comportamiento que se describe en la lista de controles).

A su vez, el manejo del teclado viene activado de manera predeterminada en todos los dispositivos.

Cómo deshabilitar la IU predeterminada

Es posible que desees desactivar por completo la configuración de la IU predeterminada de la API. Para hacerlo, fija la propiedad disableDefaultUI del mapa (dentro del objeto MapOptions) en el valor true. Esta propiedad inhabilita los comportamientos automáticos de la IU en la Google Maps JavaScript API.

El siguiente código deshabilita por completo la IU predeterminada:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

Ver el ejemplo (control-disableUI.html)

Cómo agregar controles al mapa

Es posible que desees adaptar tu interfaz eliminando, agregando o modificando el comportamiento de la IU o los controles, y garantizar que las actualizaciones futuras no alteren este comportamiento. Si deseas únicamente agregar comportamientos o modificar el existente, debes asegurarte de que el control se añada de manera explícita a tu aplicación.

Algunos controles aparecen en el mapa en forma predeterminada, mientras que otros no se muestran a menos que los solicites específicamente. La adición o eliminación de controles del mapa se especifica en los siguientes campos del objeto MapOptions, para los cuales se fija el valor true a fin de que sean visibles o el valor false a fin de que se oculten:

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

En forma predeterminada, todos los controles desaparecen si el mapa tiene un tamaño inferior a 200 x 200 px. Puedes invalidar este comportamiento configurando de manera explícita el control para que sea visible. En la siguiente tabla, por ejemplo, se muestra si el control de zoom es visible o no según el tamaño del mapa y la configuración del campo zoomControl:

Tamaño del mapa zoomControl ¿Visible?
Cualquiera false No
Cualquiera true
>= 200x200px undefined
< 200x200px undefined No

En el ejemplo siguiente se configura el mapa para que se oculte el control de zoom y se muestre el control de escala. Ten en cuenta que la IU predeterminada no se deshabilita en forma explícita, por lo cual estas modificaciones se agregan al comportamiento predeterminado de la IU.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

Ver el ejemplo (control-simple.html)

Opciones de control

Es posible configurar varios controles. Esto te permite modificar su comportamiento o aspecto. El control de tipo de mapa, por ejemplo, puede aparecer como una barra horizontal o un menú desplegable.

Estos controles se modifican cambiando los campos correspondientes en opciones dentro del objetoMapOptions al crear el mapa.

Por ejemplo, las opciones para modificar el control de tipo de mapa se muestran en el campo mapTypeControlOptions. El control de tipo de mapa puede aparecer en una de las siguientes opciones de style:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR muestra el conjunto de controles como botones en una barra horizontal, como se observa en Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU muestra un control de un botón que te permite seleccionar el tipo de mapa a través de un menú desplegable.
  • google.maps.MapTypeControlStyle.DEFAULT muestra el comportamiento predeterminado, que depende del tamaño de la pantalla y puede cambiar en versiones futuras de la API.

Ten en cuenta que si modificas opciones de control también debes habilitar explícitamente el control fijando el valor MapOptions en true. Por ejemplo, para configurar un control de mapa de modo que exhiba el estilo DROPDOWN_MENU, usa el siguiente código dentro del objeto MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

En el siguiente ejemplo se muestra la manera de cambiar la posición y el estilo predeterminados de los controles.

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

Ver el ejemplo (control-options.html).

Los controles normalmente se configuran al crear el mapa. Sin embargo, puedes modificar la presentación de controles de manera dinámica llamando al método setOptions() del objeto Map y transfiriéndole nuevas opciones de control.

Cómo modificar los controles

La presentación de un control se especifica cuando creas tu mapa a través de campos del objeto MapOptions del mapa. Estos campos se indican a continuación:

  • zoomControl habilita o deshabilita el control de zoom. De manera predeterminada, este control aparece cerca de la esquina inferior derecha del mapa. El campo zoomControlOptions agrega especificaciones al campo ZoomControlOptions que debe usarse para este control.
  • mapTypeControl habilita o deshabilita el control de tipo de mapa que permite al usuario alternar tipos de mapas (como “Mapa” y “Satélite”). Este control es visible y aparece de manera predeterminada en la esquina superior izquierda del mapa. El campo mapTypeControlOptions agrega especificaciones al campo MapTypeControlOptions que debe usarse para este control.
  • streetViewControl habilita o deshabilita el control del Pegman que permite al usuario activar un panorama de Street View. De manera predeterminada, este control aparece cerca de la esquina inferior derecha del mapa. El campo streetViewControlOptions agrega especificaciones al campo StreetViewControlOptions que debe usarse para este control.
  • rotateControl habilita o deshabilita un control de rotación para manejar la orientación de imágenes a 45°. De manera predeterminada, la presencia del control se ve determinada por la presencia o ausencia de imágenes a 45° para el tipo de mapa determinado conforme al zoom y la ubicación actual. Puedes modificar el comportamiento del control configurando el campo rotateControlOptions del mapa para especificar el campo RotateControlOptions que debe usarse. No puedes hacer que el control aparezca si no hay imágenes a 45° disponibles en el momento.
  • scaleControl habilita o deshabilita el control de escala que proporciona una escala de mapa simple. De manera predeterminada, este control no es visible. Cuando se habilita, este control aparece siempre en la esquina inferior derecha del mapa. El campo scaleControlOptions agrega especificaciones al campo ScaleControlOptions que debe usarse para este control.
  • fullscreenControl habilita e inhabilita el control que abre el mapa en el modo de pantalla completa. De forma predeterminada, este control es visible en dispositivos móviles y no visible en dispositivos de escritorio. Cuando se habilita, el control aparece cerca de la esquina superior derecha del mapa. fullscreenControlOptions especifica, además, el FullscreenControlControlOptions que se usará en este control.

Ten en cuenta que puedes especificar opciones para controles que deshabilites inicialmente.

Posicionamiento de los controles

La mayoría de las opciones de control contienen una propiedad de posición (de tipo ControlPosition) que indica el punto del mapa en el que debe ubicarse el control. El posicionamiento de estos controles no es absoluto. Por el contrario, la API los distribuye de manera inteligente haciéndolos circular en elementos de mapas existentes, u otros controles, con determinadas limitaciones (como el tamaño del mapa).

Nota: No se puede garantizar que los controles no se superpondrán en el caso de diseños complejos, aunque la API intentará disponerlos de manera inteligente.

Se admiten las siguientes posiciones de controles:

  • TOP_CENTER indica que el control debe disponerse en la parte superior central del mapa.
  • TOP_LEFT indica que el control debe disponerse en la parte superior izquierda del mapa, con subelementos “circulando” hacia la parte superior central.
  • TOP_RIGHT indica que el control debe disponerse en la parte superior derecha del mapa, con subelementos “circulando” hacia la parte superior central.
  • LEFT_TOP indica que el control debe disponerse en la parte superior izquierda del mapa, pero debajo de cualquier elemento TOP_LEFT.
  • RIGHT_TOP indica que el control debe disponerse en la parte superior derecha del mapa, pero debajo de cualquier elemento TOP_RIGHT.
  • LEFT_CENTER indica que el control debe disponerse en la parte izquierda del mapa, centrado entre las posiciones TOP_LEFT y BOTTOM_LEFT.
  • RIGHT_CENTER indica que el control debe disponerse en la parte derecha del mapa, centrado entre las posiciones TOP_RIGHT y BOTTOM_RIGHT.
  • LEFT_BOTTOM indica que el control debe disponerse en la parte inferior izquierda del mapa, pero encima de cualquier elemento BOTTOM_LEFT.
  • RIGHT_BOTTOM indica que el control debe disponerse en la parte inferior derecha del mapa, pero encima de cualquier elemento BOTTOM_RIGHT.
  • BOTTOM_CENTER indica que el control debe disponerse en la parte inferior central del mapa.
  • BOTTOM_LEFT indica que el control debe disponerse en la parte inferior izquierda del mapa, con subelementos del control “circulando” hacia la parte inferior central.
  • BOTTOM_RIGHT indica que el control debe disponerse en la parte inferior derecha del mapa, con subelementos del control “circulando” hacia la parte inferior central.

Ver el ejemplo (control-positioning-labels.html)

Ten en cuenta que estas posiciones pueden coincidir con posiciones de elementos de la IU cuyas disposiciones no pueden modificarse (como derechos de autor y el logotipo de Google). En estos casos, los controles fluirán según la lógica observada para cada posición y aparecerán lo más cerca posible de las posiciones indicadas.

En el ejemplo siguiente se muestra un mapa simple con todos los controles habilitados en diferentes posiciones.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

Ver el ejemplo (control-positioning.html)

Controles personalizados

Además de modificar el estilo y la posición de los controles de API existentes, puedes crear tus propios controles para administrar la interacción con el usuario. Los controles son widgets fijos que flotan sobre un mapa en posiciones absolutas, en contraposición con las superposiciones, que se mueven con el mapa subyacente. En términos básicos, un control es simplemente un elemento <div> que tiene una posición absoluta en el mapa, muestra algunos elementos de IU al usuario y administra la interacción con el usuario o el mapa, generalmente a través de un controlador de eventos.

Para crear tu propio control personalizado se necesitan pocas reglas. Sin embargo, las siguientes pautas pueden funcionar como una práctica recomendada:

  • Definir la CSS correspondiente para que se muestren los elementos de control.
  • Administrar la interacción con el usuario o el mapa a través de controladores de eventos para cambios de propiedades de mapas o eventos de usuario (por ejemplo, eventos 'click').
  • Crea un elemento <div> para conservar el control y agregar este elemento a la propiedad controls del objeto Map.

Todos estos asuntos se tratan a continuación.

Cómo dibujar controles personalizados

La manera en que dibujes tu control depende de ti. Generalmente, te recomendamos disponer toda la presentación de tu control dentro de un único elemento <div> para poder manipular dicho control como una unidad. Usaremos este patrón de diseño en los ejemplos que se muestran a continuación.

Para diseñar controles atractivos es necesario tener ciertos conocimientos sobre estructuras de CSS y DOM. En el código siguiente se muestra la manera de crear un control simple a partir de un <div> contenedor, un <div> para contener el contorno del botón y otro <div> para contener el interior del botón.

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

Cómo manejar eventos de controles personalizados

Para que un control sea útil, realmente debe tener una función. Esta función quedará a tu criterio. El control puede responder a las entradas del usuario o a cambios de estado del objeto Map.

Para responder a las entradas del usuario, la Google Maps JavaScript API proporciona un método addDomListener() que gestiona eventos entre navegadores, el cual gestiona la mayoría de los eventos de DOM que admite el navegador. El siguiente fragmento de código agrega un detector para el evento 'click'. Ten en cuenta que este evento se recibe del DOM, no del mapa.

// Setup the click event listener: simply set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

Cómo posicionar controles personalizados

Los controles personalizados se posicionan en el mapa mediante su ubicación en posiciones correspondientes dentro de la propiedad de controles del objeto Map. Esta propiedad contiene un conjunto de elementos google.maps.ControlPosition. Puedes agregar un control personalizado al mapa agregando Node (normalmente, <div>) a una propiedad ControlPosition. (Para obtener información sobre estas posiciones, consulta la sección Posicionamiento de los controles, arriba).

En cada propiedad ControlPosition se almacena un conjunto MVCArray con los controles que se muestran en la posición determinada. Como resultado, cuando se agregan controles a la posición o se eliminan de ella, la API los actualiza de manera correspondiente.

La API dispone controles en cada posición conforme al orden de una propiedad index; los controles con índices inferiores se disponen en primer lugar. Por ejemplo, dos controles personalizados de la posición BOTTOM_RIGHT se dispondrán conforme a este orden de índices, según el cual se priorizan los valores de índice inferiores. De manera predeterminada, todos los controles personalizados se disponen después de los controles de API predeterminados. Puedes invalidar este comportamiento fijando la propiedad index de un control en un valor negativo. Los controles personalizados no pueden disponerse a la izquierda del logotipo ni a la derecha de los derechos de autor.

Con el código siguiente se crea un nuevo control personalizado (no se muestra su constructor) y este se agrega al mapa en la posición TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

Ejemplo de un control personalizado

El siguiente control es simple (aunque no resulta particularmente útil) y en él se combinan los patrones que se muestran arriba. Este control responde a eventos 'click' de DOM centrando el mapa en cierta ubicación predeterminada:

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Ver el ejemplo (control-custom.html)

Cómo agregar estados a los controles

En los controles también pueden almacenarse estados. El ejemplo siguiente se asemeja al que se muestra antes, pero el control contiene un botón “Set Home” que configura el control de modo que exhiba una nueva ubicación principal. Podemos hacerlo creando una propiedad home_ dentro del control, a fin de almacenar este estado y proporcionar métodos de obtención y configuración para este.

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<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;
}
#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Ver el ejemplo (control-custom-state.html)

Enviar comentarios sobre...

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