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

Como usar MySQL e PHP com o Google Maps

Visão geral

Este tutorial mostra como exibir informações de um banco de dados MySQL em um Google Map usando a Google Maps JavaScript API. Adequado para pessoas com conhecimento intermediário de MySQL, PHP e XML.

O mapa neste tutorial exibe dois tipos de marcadores para diferenciar entre o local de restaurantes e de bares. Um banco de dados no MySQL armazena as informações sobre os locais do marcador, como o tipo de lugar (restaurante ou bar), seu nome, endereço e coordenadas geográficas. O mapa recupera estas informações do banco de dados, por um arquivo XML que age como um intermediário entre o banco de dados e o mapa. É possível usar declarações PHP para exportar informações do marcador do banco de dados para um arquivo XML.

Clique em um marcador no mapa abaixo para exibir uma janela de informações com o nome do local e endereço. Os marcadores têm os rótulos "R" ou "B" e mostram a localização de restaurantes e bares, respectivamente.

O exemplo abaixo mostra o código inteiro de que você precisa para criar esse mapa.

      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
<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>

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 >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* 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;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Primeiros passos

Instale, ajuste e configure um servidor MySQL com PHP na sua máquina.

Criar uma tabela no MySQL

Crie uma tabela no MySQL contendo atributos dos marcadores no mapa, como o marcador id, name, address, lat, lng e type.

O atributo id serve como uma chave principal e o atributo type distingue entre restaurantes e bares.

Para manter o espaço de armazenamento para a sua tabela em um mínimo, é possível especificar os atributos lat e lng para terem um tamanho flutuante (10,6). Isto permite que os campos armazenem 6 dígitos após o decimal, além dos 4 dígitos antes do decimal.

É possível interagir com o banco de dados MySQL pela interface do phpMyAdmin. A captura de tela abaixo exibe a configuração da tabela no phpMyAdmin.

Você também pode usar os comandos SQL para criar a tabela, como na declaração SQL abaixo.

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Preencher a tabela

É possível importar os dados do marcador para o banco de dados SQL usando a funcionalidade "Importar" da interface do phpMyAdmin, que permite que você importe dados em vários formatos.

Veja abaixo os dados do marcador para o mapa neste tutorial, no formato .csv.

Love.Fish,"580 Darling Street, Rozelle, NSW",-33.861034,151.171936,restaurant
Young Henrys,"76 Wilford Street, Newtown, NSW",-33.898113,151.174469,bar
Hunter Gatherer,"Greenwood Plaza, 36 Blue St, North Sydney NSW ",-33.840282,151.207474,bar
The Potting Shed,"7A, 2 Huntley Street, Alexandria, NSW",-33.910751,151.194168,bar
Nomad,"16 Foster Street, Surry Hills, NSW",-33.879917,151.210449,bar
Three Blue Ducks,"43 Macpherson Street, Bronte, NSW",-33.906357,151.263763,restaurant
Single Origin Roasters,"60-64 Reservoir Street, Surry Hills, NSW",-33.881123,151.209656,restaurant
Red Lantern,"60 Riley Street, Darlinghurst, NSW",-33.874737,151.215530,restaurant

Também é possível usar os comandos SQL abaixo para importar os dados do marcador para a tabela SQL.

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Love.Fish', '580 Darling Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Young Henrys', '76 Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Hunter Gatherer', 'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Potting Shed', '7A, 2 Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Nomad', '16 Foster Street, Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Three Blue Ducks', '43 Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Single Origin Roasters', '60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Red Lantern', '60 Riley Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

Emitir dados como XML usando PHP

Neste ponto, você deve ter uma tabela chamada markers contendo os dados de marcador do mapa. Esta seção mostra como exportar os dados da tabela do banco de dados SQL em um formato XML, usando declarações PHP. O mapa pode usar o arquivo XML para recuperar os dados do marcador por meio de chamadas JavaScript assíncronas.

Usar um arquivo XML como intermediário entre o banco de dados e o mapa do Google permite um carregamento de página inicial mais rápido e um aplicativo de mapa mais flexível. Isto facilita a depuração, pois é possível verificar independentemente a saída de XML do banco de dados e a análise do JavaScript do XML. Também é possível executar o mapa inteiramente com base apenas nos arquivos XML e não usar o banco de dados MySQL.

Caso nunca tenha usado PHP para conectar-se ao banco de dados MySQL, acesse php.net e leia mysql_connect, mysql_select_db, my_sql_query e mysql_error.

É possível usar qualquer uma das três técnicas abaixo para emitir os dados da tabela SQL como XML com PHP.

Ao usar um navegador público para acessar um banco de dados usando arquivos PHP, é importante conferir se as credenciais do banco de dados são seguras. É possível fazer isto colocando as informações de conexão do banco de dados em um arquivo PHP separado do código PHP principal. O arquivo com suas credenciais deve ser parecido com o demonstrado abaixo, mas contendo suas próprias informações de banco de dados.

<?php
$username="username";
$password="password";
$database="username-databaseName";
?>

Usar funções XML DOM do PHP para emitir XML

As funções XML DOM do PHP cuidam das sublocações, como o escape de entidades especiais no XML, e simplifica a criação de XML com estruturas mais complexas. É possível usar as funções XML DOM para criar nós de XML, anexar nós filhos e emitir um documento XML para a tela. Para determinar se o PHP do seu servidor tem a funcionalidade XML DOM ativada, verifique a configuração ou tente inicializar um domxml_new_doc().

Abaixo está o arquivo PHP que conecta o banco de dados MySQL e exibe o XML ao navegador.

<?php
require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $doc->create_element("marker");
  $newnode = $parnode->append_child($node);

  $newnode->set_attribute("name", $row['name']);
  $newnode->set_attribute("address", $row['address']);
  $newnode->set_attribute("lat", $row['lat']);
  $newnode->set_attribute("lng", $row['lng']);
  $newnode->set_attribute("type", $row['type']);
}

$xmlfile = $doc->dump_mem();
echo $xmlfile;

?>

No arquivo acima, o código PHP primeiro inicializa um novo documento XML e cria o nó pai "markers". Em seguida, ele se conecta ao banco de dados, executa uma consulta SELECT * (selecionar tudo) na tabela de marcadores e itera pelos resultados. Para cada linha na tabela (cada local), o código cria um novo nó XML com os atributos de linha como atributos XML e anexa-os ao nó pai. A última parte do código então descarrega o XML para a tela do navegador.

Observação: Se o seu banco de dados contém caracteres internacionais ou caso você tenha que forçar uma saída UTF-8, é possível usar utf8_encode na saída de dados.

Usar eco do PHP para emitir XML

Caso não tenha acesso às funções dom_xml do PHP, então você pode emitir o XML com a função echo. Use uma função de assistente (por exemplo: parseToXML) ao usar apenas a função echo para codificar corretamente algumas entidades especiais (<,>,",') para que sejam compatíveis com XML.

Abaixo está o arquivo PHP que conecta o banco de dados MySQL e exibe o XML ao navegador.

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

O código acima conecta-se ao banco de dados e executa uma consulta SELECT * (selecionar tudo) na tabela dos marcadores. Em seguida, ecoa o nó markers pai e itera pelos resultados da consulta. O código então ecoa o nó XML para o marcador em cada linha da tabela (para cada local) Isto envia os campos de endereço e nome pela função parsetoXML primeiro, caso haja alguma entidade especial. O script acaba ecoando e fechando a tag markers.

Observação: É possível usar utf8_encode na saída de dados XML se o seu banco de dados contiver caracteres internacionais ou se você precisar forçar uma saída UTF-8.

Usar funções DOM do PHP para emitir XML

Abaixo está o arquivo PHP que conecta o banco de dados MySQL e exibe o XML ao navegador.

<?php

require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

?>

O código acima inicializa um novo documento XML e cria um nó pai "markers". Em seguida, ele se conecta ao banco de dados, executa uma consulta SELECT * (selecionar tudo) na tabela de marcadores e itera pelos resultados. O código então cria um nó XML para cada linha na tabela (para cada local), com os atributos de linha como atributos XML, e anexa-os ao nó pai. Ele em seguida descarrega o XML de saída para a tela do navegador.

Observação: Se o seu banco de dados contém caracteres internacionais ou caso você tenha que forçar uma saída UTF-8, é possível usar utf8_encode na saída de dados.

Verificar se a saída de XML funciona

Para confirmar que o script PHP está produzindo um XML válido, chame o arquivo de script do PHP criado a partir do navegador para ver a saída XML como demonstrado abaixo.

<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW" lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria, NSW" lat="-33.910751" lng="151.194168" type="bar"/>

<marker name="Nomad" address="16 Foster Street, Surry Hills, NSW" lat="-33.879917" lng="151.210449" type="bar"/>
<marker name="Three Blue Ducks" address="43 Macpherson Street, Bronte, NSW" lat="-33.906357" lng="151.263763" type="restaurant"/>
<marker name="Single Origin Roasters" address="60-64 Reservoir Street, Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/>
<marker name="Red Lantern" address="60 Riley Street, Darlinghurst, NSW" lat="-33.874737" lng="151.215530" type="restaurant"/>
</markers>

Se o navegador não estiver exibindo os dados de marcador do seu banco de dados como saída XML, tente depurar removendo a linha no arquivo que define o cabeçalho para o tipo de conteúdo text/xml . Esta linha pode fazer com que seu navegador tente analisar o XML e complica a visualização das suas mensagens de depuração.

Criação do mapa

Esta seção mostra como desenvolver o exemplo de mapa neste tutorial usando JavaScript e o arquivo XML de saída. Leia a documentação para aprender mais sobre os básicos da criação de um mapa do Google.

Crie um novo arquivo no editor de texto e salve-o como index.html. Leia as seções a seguir para entender o código que você pode adicionar a este arquivo.

Carregamento do arquivo XML

Para carregar o arquivo XML na página, é possível aproveitar o objeto XMLHttpRequest fornecido pelo navegador. Este objeto permite que você recupere um arquivo que reside no mesmo domínio que a página da Web solicitante e é a base da programação "AJAX".

Defina sua própria função para carregar o arquivo e chame-a de downloadUrl(). A função usa dois parâmetros:

  1. url especifica o caminho para o arquivo XML ou para o script PHP que gera o arquivo, dependendo se você quer atualizar dinamicamente o arquivo XML quando o banco de dados altera. Este mapa neste tutorial chama um arquivo XML estático para os dados do marcador.
    Ele é a maneira mais fácil de fazer este arquivo XML residir no mesmo diretório que o arquivo HTML para que você possa consultá-lo pelo nome do arquivo.
  2. callback indica a função que o script chama quando o XML retorna para o JavaScript.

O código abaixo mostra a declaração da função.

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

Observação: Como XMLHttpRequest é assíncrono, a função de retorno de chamada inicia a função downloadURL com base no tamanho do arquivo XML. Quanto maior for o seu arquivo XML, mais tempo levará. Por este motivo, o melhor é não colocar nenhum código após downloadUrl que precise dos marcadores dentro da função de retorno de chamada. Em vez disso, esses códigos podem ser inseridos na função de retorno de chamada.

Agora que você definiu a função, é possível chamá-la pelo seu código, passando-a em nome do seu arquivo PHP e da função de retorno de chamada. O mapa neste tutorial chama um arquivo XML estático para os dados do marcador, como no código abaixo.


downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var icon = customLabel[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      label: icon.label
    });

Criar marcadores personalizados

O código abaixo mostra como adicionar rótulos personalizados aos seus marcadores criando uma matriz associativa. Isto associa seus rótulos com as strings type do marcador: restaurant ou bar. Isto facilita a referência de rótulos ao criar marcadores do arquivo XML.

var customLabel = {
  restaurant: {
    label: 'R'
  },
  bar: {
    label: 'B'
  }
};

Criar marcadores e janelas de informações

Ao criar marcadores, é possível recuperar os rótulos de marcador adequados usando o type como a chave para a matriz associada customLabel. Encaminhe a propriedade .label como uma opção do construtor google.maps.Marker.

Em seguida, crie o HTML que você quer que apareça na janela de informações concatenando o nome, o endereço e as tags HTML para enfatizar o nome.

Se você armazenar descrições formatadas em HTML no seu banco e dados, é possível que tenha que lidar com escapes de entidades HTML e esteja limitado a esta saída de HTML. Ao esperar até que você tenha recuperado cada atributo separadamente no JavaScript, será possível se divertir com o HTML no lado do cliente e pré-visualizar novas formatações rapidamente.

Após construir a string de HTML, o código abaixo adiciona um detector de eventos ao marcador que exibe uma janela de informações ao ser clicado.

marker.addListener('click', function() {
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
});

Como tudo funciona em conjunto

Abra o arquivo index.html em um navegador. Quando a página carrega, a função initMap define o mapa e, em seguida, chama a função downloadUrl. Esta função itera por todos os elementos do marcador e recupera os atributos name, address, type e latLng para cada elemento de marcador.
O código então cria marcadores, adiciona marcadores ao mapa e vincula uma janela de informações para cada marcador para exibir uma descrição com clique.

Mais informações

Caso queira preparar marcadores em um mapa usando dados de local próprios, é possível usar um serviço de geocodificação em lote para converter os endereços em latitudes e longitudes para os seus marcadores.

Enviar comentários sobre…

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