Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Maps JavaScript API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Maps JavaScript API e serviços relacionados
  3. Criar chaves apropriadas
Continuar

Controles

Visão geral dos controles

Os mapas exibidos por meio da Google Maps JavaScript API contêm elementos de IU para permitir a interação do usuário com o mapa. Esses elementos são conhecidos como controles. Você pode introduzir variações deles no seu aplicativo. Você também pode não fazer nada e deixar a Google Maps JavaScript API lidar com todos os comportamentos dos controles.

O mapa a seguir mostra um conjunto padrão de controles exibidos pela Google Maps JavaScript API:

Ver exemplo (control-default.html).

Veja abaixo uma lista com todo o conjunto de controles que você pode usas em mapas:

  • O controle Zoom exibe botões "+" e "-" para alterar o nível de zoom do mapa. Esse controle é exibido por padrão no canto inferior direito do mapa.
  • O controle Map Type está disponível nos estilos suspenso ou barra de botões horizontal, permitindo que o usuário escolha um tipo de mapa (ROADMAP, SATELLITE, HYBRID ou TERRAIN). Esse controle é exibido por padrão no canto superior esquerdo do mapa.
  • O controle Street View contém um ícone Pegman, que pode ser arrastado para o mapa para ativar o Street View. Esse controle é exibido por padrão perto do canto inferior direito do mapa.
  • O controle Rotate oferece uma combinação de opções de inclinação e rotação para mapas que contêm imagens oblíquas. Esse controle é exibido por padrão perto do canto inferior direito do mapa. Consulte imagens de 45° para obter mais informações.
  • O controle Scale exibe um elemento de escala de mapa. Por padrão, esse controle é desativado.
  • O Controle em tela cheia oferece a opção de abrir o mapa em modo de tela cheia. Esse controle fica ativo por padrão em dispositivos móveis e inativo por padrão em computadores. Observação: o iOS não oferece suporte ao recurso de tela cheia. Portanto, o controle em tela cheia não fica visível em dispositivos iOS.

Esses controles de mapa não são acessados ou modificados diretamente. Em vez disso, modifique os campos MapOptions do mapa, que afetam a visibilidade e a apresentação dos controles. Ajuste a apresentação dos controles ao instanciar o mapa (com as MapOptions adequadas) ou modifique um mapa dinamicamente chamando setOptions() para alterar as opções do mapa.

Nem todos esses controles estão ativados por padrão. Para saber mais sobre o comportamento padrão da IU (e como modificar esse comportamento), consulte A IU padrão abaixo.

A IU padrão

Por padrão, todos os controles desaparecem se o mapa é muito pequeno (200x200 px). Substitua esse comportamento definindo explicitamente que o controle é visível. Consulte Adição de controles ao mapa.

O comportamento e o visual dos controles é o mesmo em dispositivos móveis e em computadores, exceto quanto ao controle em tela cheia (veja o comportamento descrito na lista de controles).

Além disso, o processamento do teclado está ativado por padrão em todos os dispositivos.

Desativação da IU padrão

As configurações padrão de IU da API podem ser desativadas totalmente. Para isso, defina a propriedade disableDefaultUI (no objeto MapOptions) como true. Essa propriedade desativa os comportamentos automáticos da IU da Google Maps JavaScript API.

O código a seguir desativa a IU padrão totalmente:

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 exemplo (control-disableUI.html).

Adição de controles ao mapa

Personalize a interface removendo, adicionando ou modificando o comportamento ou os controles da IU e garanta que as atualizações futuras não alterem esse comportamento. Para apenas adicionar ou modificar um comportamento existente, você precisa garantir a adição explícita do controle ao aplicativo.

Alguns controles são exibidos no mapa por padrão. Outros são exibidos apenas quando especificamente solicitados. A adição ou remoção de controles do mapa é especificada nos seguintes campos do objeto MapOptions, que são definidos como true para que os controles sejam visíveis ou false para ocultá-los.

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

Por padrão, todos os controles desaparecem se o mapa é menor que 200x200 px. Substitua esse comportamento definindo explicitamente que o controle é visível. Por exemplo, a tabela a seguir mostra se o controle de zoom é visível ou não, de acordo com o tamanho do mapa e a configuração do campo zoomControl:

Tamanho do mapa zoomControl Visível?
Qualquer false Não
Qualquer true Sim
>= 200x200 px undefined Sim
< 200x200 px undefined Não

O exemplo a seguir define o mapa para ocultar o controle Zoom e exibir o controle Scale. Observe que não desativamos explicitamente a IU padrão. Portanto, essas modificações são adicionadas ao comportamento padrão da 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 exemplo (controle-simple.html).

Opções dos controles

Vários controles são configuráveis, permitindo alterar o comportamento e a aparência. O controle Map Type, por exemplo, pode ser exibido como uma barra horizontal ou um menu suspenso.

Esses controles são modificados alterando os campos de options adequados no objeto MapOptions durante a criação do mapa.

Por exemplo, as opções para alterar o controle Map Type estão indicadas no campo mapTypeControlOptions. O controle Map Type pode aparecer em uma das seguintes opções de style:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR exibe a matriz de controles como botões em uma barra horizontal, como mostrado no Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU exibe um controle com um único botão, permitindo selecionar o tipo de mapa em um menu suspenso.
  • google.maps.MapTypeControlStyle.DEFAULT exibe o comportamento padrão, que depende do tamanho da tela e pode mudar em versões futuras da API.

Observe que, se qualquer opção de controle é modificada, é preciso também ativar explicitamente o controle definindo o valor das MapOptions adequadas como true. Por exemplo, para configurar um controle Map Type para exibir o estilo DROPDOWN_MENU, use o código a seguir no objeto MapOptions:

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

O exemplo a seguir demonstra como alterar a posição e o estilo padrão dos 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 o exemplo (control-options.html).

Normalmente, os controles são configurados durante a criação do mapa. No entanto, é possível alterar dinamicamente a apresentação dos controles chamando o método setOptions() do Map e passando as novas opções de controle.

Modificação de controles

Especifique a apresentação de um controle durante a criação do mapa, usando campos no objeto MapOptions do mapa. Esses campos são descritos a seguir:

  • zoomControl ativa/desativa o controle Zoom. Por padrão, esse controle é visível e é exibido perto do canto inferior direito do mapa. Além disso, o campo zoomControlOptions especifica as ZoomControlOptions usadas nesse controle.
  • mapTypeControl ativa/desativa o controle Map Type que permite ao usuário alternar entre tipos de mapa (como Map e Satellite). Por padrão, esse controle é visível e é exibido no canto superior esquerdo do mapa. Além disso, o campo mapTypeControlOptions especifica as MapTypeControlOptions usadas nesse controle.
  • streetViewControl ativa/desativa o controle Pegman, que permite ao usuário ativar um panorama do Street View. Por padrão, esse controle é visível e é exibido perto do canto inferior direito do mapa. Além disso, o campo streetViewControlOptions especifica as StreetViewControlOptions usadas nesse controle.
  • rotateControl ativa/desativa a exibição de um controle Rotate, que controla a orientação de imagens de 45°. Por padrão, a presença do controle é determinada pela presença ou ausência de imagens de 45° no zoom e localização atuais do tipo de mapa especificado. Altere o comportamento do controle definindo rotateControlOptions do mapa para especificar as RotateControlOptions usadas. Não é possível exibir o controle sem a disponibilidade de imagens de 45°.
  • scaleControl ativa/desativa o controle Scale, que oferece uma escala de mapa simples. Por padrão, esse controle não é visível. Quando ativado, é sempre exibido no canto inferior direito do mapa. Além disso, as scaleControlOptions especificam as ScaleControlOptions usadas nesse controle.
  • fullscreenControl ativa/desativa o controle que abre o mapa em modo tela cheia. Por padrão, esse controle está visível em dispositivos móveis e invisível em computadores. Quando ativo, o controle aparece perto da parte superior direita do mapa. As fullscreenControlOptions especificam ainda mais as FullscreenControlControlOptions para usar com este controle.

Observe que é possível especificar opções para controles inicialmente desativados.

Posicionamento de controles

A maioria das opções de controles contém uma propriedade position (do tipo ControlPosition), que indica o posicionamento do controle no mapa. O posicionamento desses controles não é absoluto. Em vez disso, a API define o layout dos controles de forma inteligente, "fluindo" em torno de elementos ou outros controles existentes do mapa, dentro das restrições informadas (como o tamanho do mapa).

Observação: não é possível garantir que os controles não se sobreponham em layouts complicados. No entanto, a API tenta organizá-los de forma inteligente.

As posições de controle seguintes são permitidas:

  • TOP_CENTER indica que o controle é posicionado ao longo da parte superior central do mapa.
  • TOP_LEFT indica que o controle é posicionado ao longo da parte superior esquerda do mapa, com todos os subelementos do controle "fluindo" na direção da parte superior central.
  • TOP_RIGHT indica que o controle é posicionado ao longo da parte superior direita do mapa, com todos os subelementos do controle "fluindo" na direção da parte superior central.
  • LEFT_TOP indica que o controle é posicionado ao longo da parte superior esquerda do mapa, mas abaixo de todos os elementos TOP_LEFT.
  • RIGHT_TOP indica que o controle é posicionado ao longo da parte superior direita do mapa, mas abaixo de todos os elementos TOP_RIGHT.
  • LEFT_CENTER indica que o controle é posicionado ao longo do lado esquerdo do mapa, centralizado entre as posições TOP_LEFT e BOTTOM_LEFT.
  • RIGHT_CENTER indica que o controle é posicionado ao longo do lado direito do mapa, centralizado entre as posições TOP_RIGHT e BOTTOM_RIGHT.
  • LEFT_BOTTOM indica que o controle é posicionado ao longo da parte inferior esquerda do mapa, mas acima de todos os elementos BOTTOM_LEFT.
  • RIGHT_BOTTOM indica que o controle é posicionado ao longo da parte inferior direita do mapa, mas acima de todos os elementos BOTTOM_RIGHT.
  • BOTTOM_CENTER indica que o controle é posicionado ao longo da parte inferior central do mapa.
  • BOTTOM_LEFT indica que o controle é posicionado ao longo da parte inferior esquerda do mapa, com todos os subelementos do controle "fluindo" na direção da parte inferior central.
  • BOTTOM_RIGHT indica que o controle é posicionado ao longo da parte inferior direita do mapa, com todos os subelementos do controle "fluindo" na direção da parte inferior central.

Ver exemplo (control-positioning-labels.html).

Observe que essas posições podem coincidir com posições de elementos de IU que não podem ser modificadas (como direitos autorais e o logotipo da Google). Nesses casos, os controles "fluem" de acordo com a lógica anotada para cada posição e são exibidos o mais próximo possível da posição indicada.

O exemplo a seguir mostra um mapa simples com todos os controles ativados em posições diferentes.

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 o exemplo (control-positioning.html).

Controles personalizados

Além de modificar o estilo e a posição de controles de API atuais, é possível criar seus próprios controles para processar a interação com o usuário. Os controles são widgets estacionários que flutuam sobre o mapa em posições absolutas, ao contrário das sobreposições, que se movem com o mapa subjacente. Em termos mais precisos, um controle é apenas um elemento <div>, com uma posição absoluta no mapa, que exibe alguma IU ao usuário e processa a interação com o usuário ou o mapa, normalmente usando um manipulador de eventos.

Algumas regras são necessárias para criar o seu controle personalizado. No entanto, as diretrizes a seguir podem servir como prática recomendada:

  • Defina uma CSS adequada para os elementos de controle a exibir.
  • Processe a interação com o usuário no mapa usando manipuladores de eventos para alterações de propriedades ou eventos de usuário no mapa (por exemplo, eventos 'click').
  • Crie um elemento <div> para o controle e adicione esse elemento à propriedade controls do Map.

Todas essas questões são discutidas a seguir.

Desenho de controles personalizados

Você decide como desenhar o seu controle. De forma geral, recomendamos que você posicione toda a apresentação do controle em um único elemento <div> para permitir a manipulação do controle como uma única unidade. Usamos esse padrão de projeto nos exemplos mostrados a seguir.

O projeto de controles atraentes exige algum conhecimento da estrutura de CSS e DOM. O código a seguir mostra como um controle simples é criado usando um <div> como contêiner, um <div> para o contorno do botão e outro <div> para o interior do botão.

// 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);

Processamento de eventos de controles personalizados

O controle deve fazer alguma coisa para ser útil. Você decide o que o controle faz. O controle pode responder a entradas do usuário ou a alterações no estado do Map.

Para responder à interação do usuário, a Google Maps JavaScript API fornece um método de processamento de eventos multinavegador addDomListener(), que trata da maioria dos eventos DOM compatíveis com o navegador. O fragmento de código a seguir adiciona um ouvinte ao evento 'click' do navegador. Observe que esse evento é recebido do DOM e não do 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)
});

Posicionamento de controles personalizados

Os controles personalizados são posicionados no mapa em posições adequadas dentro da propriedade controls do objeto Map. Essa propriedade contém uma matriz de google.maps.ControlPosition. Acrescente um controle personalizado ao mapa adicionando o Node (normalmente, o <div>) a uma ControlPosition adequada. (Para obter informações sobre essas posições, consulte Posicionamento de controles acima.)

Cada ControlPosition armazena um MVCArray dos controles exibidos naquela posição. Como resultado, a API atualiza os controles quando são adicionados ou removidos da posição.

A API coloca os controles em cada posição seguindo a ordem da propriedade index. Controles com índice menor são colocados antes. Por exemplo, dois controles personalizados na posição BOTTOM_RIGHT são colocados de acordo com essa ordem de índice, com precedências para os menores valores de índice. Por padrão, todos os controles personalizados são posicionados após todos os controles padrão da API. Substitua esse comportamento definindo a propriedade index do controle como um valor negativo. Controles personalizados não podem ser posicionados à esquerda do logotipo nem à direita dos direitos autorais.

O código a seguir cria um novo controle personalizado (seu construtor não é mostrado) e adiciona-o ao mapa na posição 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);

Um exemplo de controles personalizado

O controle a seguir é simples (embora não muito útil) e combina os padrões mostrados acima. O controle responde a eventos 'click' do DOM centralizando o mapa em uma determinada localização padrão:

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 exemplo (control-custom.html).

Adição de estado a controles

Os controles também podem armazenar estado. O exemplo a seguir é semelhante ao mostrado antes, mas o controle contém um botão "Set Home" adicional, que configura o controle para exibir uma nova localização inicial. Isso é feito criando a propriedade home_ dentro do controle para armazenar seu estado e fornecer getters e setters para esse estado.

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 exemplo (control-custom-state.html).

Enviar comentários sobre…

Google Maps JavaScript API
Google Maps JavaScript API
Precisa de ajuda? Acesse nossa página de suporte.