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

Exibição em KML

Visão geral

Este tutorial mostra como exibir informações de um arquivo KML em um mapa do Google e em uma barra lateral. Para obter mais informações sobre o uso de arquivos KML em mapas, leia o guia para Camadas KML. Tente clicar em um marcador no mapa abaixo para ver os dados na barra lateral.

A seção abaixo exibe todo o código necessário para se criar o mapa e a barra lateral.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

/**
 * Initializes the map and calls the function that loads the KML layer.
 */
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
  loadKmlLayer(src, map);
}

/**
 * Adds a KMLLayer based on the URL passed. Clicking on a marker
 * results in the balloon content being loaded into the right-hand div.
 * @param {string} src A URL for a KML file.
 */
function loadKmlLayer(src, map) {
  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
 <!-- 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>

Sua vez de tentar

Passe o cursor na parte superior direita do bloco de código para copiar o código ou abri-lo no JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      /**
       * Initializes the map and calls the function that loads the KML layer.
       */
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });
        loadKmlLayer(src, map);
      }

      /**
       * Adds a KMLLayer based on the URL passed. Clicking on a marker
       * results in the balloon content being loaded into the right-hand div.
       * @param {string} src A URL for a KML file.
       */
      function loadKmlLayer(src, map) {
        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        google.maps.event.addListener(kmlLayer, 'click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Introdução

Estes são os estágios da criação do mapa e da barra lateral para este tutorial:

  1. Configurar o arquivo KML
  2. Exibir a KMLlayer
  3. Exibir os dados na barra lateral

Configuração do arquivo KML para importação

O seu arquivo KML deve estar de acordo com o padrão KML. Para obter detalhes sobre este padrão, consulte o website Open Geospatial Consortium . A documentação de KML da Google também descreve o idioma e oferece uma referência e documentação conceitual de desenvolvedor.

Se estiver aprendendo e não tiver um arquivo KML, é possível:

  • Usar o seguinte arquivo KML para este tutorial:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Encontrar um arquivo KML na Web. É possível usar o operador de pesquisa filetype da Google.

    Substitua todos os termos de pesquisa por velodromes ou omita o termo para encontrar todos os arquivos KML.

Se estiver criando um arquivo próprio, o código neste exemplo presume que:

  • Você hospedou publicamente o arquivo na internet. Este é um requisito para todos os aplicativos que carregam KML em uma KMLLayer para que os servidores da Google possam encontrar e recuperar o conteúdo para exibir no mapa.
  • O arquivo não está em uma página protegida por senha.
  • Os seus recursos têm conteúdo na janela de informações. É possível conter este conteúdo em um elemento description ou incluí-lo usando um elemento ExtendedData e substituição de entidade (leia abaixo para obter mais informações). Ambos são acessíveis como uma propriedade infoWindowHtml do recurso.

Elementos ExtendedData

O arquivo KML neste tutorial inclui informações de recurso em um elemento ExtendedData. Para juntar estas informações na descrição do recurso, use substituição de entidade, que é essencialmente uma variável na tag BalloonStyle.

A tabela abaixo explica o código para esta seção.

Código e descrição 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

O arquivo KML tem um único elemento Style que é aplicado a todas as marcações.
Este elemento Style atribui um valor de #[video] ao elemento de texto de BalloonStyle.
O formato $[x] instrui o analisador de KML a procurar um elemento Data chamado video e para usá-lo como texto do balão.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

Cada Placemark contém elemento ExtendedData , que retém o elemento Data. Observe que cada Placemark tem um único elemento Data com um atributo de nome de video.
O arquivo para este tutorial usa vídeo do YouTube incorporado como o valor para cada texto de balão do marcador.

É possível obter mais informações sobre substituição de entidade no capítulo Adicionar dados personalizados da documentação de KML.

Exibição da KMLLayer

Inicializar o mapa

Esta tabela explica o código desta seção.

Código e descrição 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Para exibir o KML em um mapa, é preciso antes criar o mapa.
Este código cria um novo objeto do Google Map, o instrui onde centralizar e usar zoom e anexa o mapa ao div.
Obtenha mais informações sobre os básicos da criação de um Google Map no tutorial Adicionar um Google Map ao seu website .

Criar a KMLLayer

Esta tabela explica o código que cria uma KMLLayer.

Código e descrição 
var kmlLayer = new google.maps.KmlLayer();

Cria um novo objeto KMLLayer para exibir o seu KML.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

O construtor da KMLLayer define o URL do seu arquivo KML. Ele também define as propriedades para o objeto KMLLayer que fazem o seguinte:
  • Instrui a camada a não exibir uma janela de informações quando clicada.
  • Instrui o mapa a centralizar e usar zoom na caixa limitadora dos conteúdos da camada.
  • Define o mapa para o objeto Map criado anteriormente.
O guia de referência da Google Maps JavaScript API lista todas as opções disponíveis para esta camada.
Carregue o seu arquivo HTML para exibir o conteúdo do arquivo KML como uma camada na parte superior do mapa base. No entanto, clicar em qualquer recurso não resultará em uma ação ainda.

Exibir dados na barra lateral

Esta seção explica as configurações que exibem o conteúdo da janela de informações na barra lateral ao clicar em um recurso no mapa. Isto é feito:

  • Detectando um evento de clique em qualquer um dos recursos da KMLLayer.
  • Obtendo os dados do recurso clicado.
  • Gravando esses dados na barra lateral.

Adicionar um detector de evento

O Google Maps fornece uma função para detectar e responder a eventos de usuários no mapa, como cliques ou pressionar de teclas do teclado. Ele adiciona um detector para tais eventos click.

A tabela abaixo explica o código para esta seção.

Código e descrição 
google.maps.event.addListener(kmlLayer, 'click', function(event) {});

O detector de evento google.maps.event.addListener se concentra no seguinte:
  • No objeto que deve detectar. Neste tutorial, este é o objeto kmlLayer.
  • O tipo de evento para detectar Neste tutorial, este é o evento click.
  • Uma função para chamar quando o evento ocorre.
É possível aprender mais sobre os eventos no Guia do desenvolvedor.

Gravar os dados do recurso KML na barra lateral

Neste estágio do tutorial, você capturou os eventos de clique nos recursos da camada. É possível agora definir o aplicativo para gravar os dados do recurso e o conteúdo da janela de informações na barra lateral.

A tabela abaixo explica o código para esta seção.

Código e descrição 
var content = event.featureData.infoWindowHtml;

Grava o conteúdo da janela de informações em uma variável. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Identifica o div para gravar e substitui o HTML nele pelo conteúdo do recurso. 
google.maps.event.addListener(kmlLayer, 'click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Estas linhas de código ficam disponíveis no construtor addListener .

Agora, sempre que você clicar em um recurso KML no mapa, a barra lateral atualiza para exibir o conteúdo da janela de informações.

Mais informações

Leia mais sobre o uso de arquivos KML.

Enviar comentários sobre…

Esta página
Comentários sobre a documentação
Google Maps JavaScript API
Google Maps JavaScript API
Comentários sobre o produto
Precisa de ajuda? Acesse nossa página de suporte.