Mídia - Mapa

Última atualização: 5 de maio de 2025

Tópicos:

Criado para:

Iniciante
Intermediário
Usuário

Use o tipo de conteúdo Mapa para adicionar um mapa da Google Maps Plataforma para o Page Builder estágio. Por exemplo, você pode adicionar um mapa a um bloco e, em seguida, adicionar o bloco às páginas Sobre Nós e Fale Conosco.

Para aproveitar ao máximo a Plataforma Google Maps, você pode personalizar o mapa, realçar seus locais de loja e usar o Google Places para adicionar informações avançadas sobre sua loja a todos os Google Maps.

Benefícios da incorporação de um mapa do Google

Fornece aos compradores um escopo completo de informações sobre sua empresa (número de telefone, site, avaliações, classificações de estrelas e assim por diante) diretamente no seu site.
Um mapa do Google geralmente destaca atrações próximas, parques, restaurantes e assim por diante. Essas informações ajudam os clientes a determinar sua localização física e planejar a viagem.
Facilita para os clientes encontrar o endereço de sua loja física sem a necessidade de abrir uma nova janela do navegador e sair do site.
Se você tiver uma cadeia de lojas físicas, adicionar um Mapa do Google no seu site ajudará a aumentar a percepção e a credibilidade da sua marca na forma de itens destacados.

Exemplo de vitrine - mapear com localização

NOTE

Se você estiver fazendo alterações significativas no conteúdo de Page Builder, é recomendável aumentar o Tempo de Vida da Sessão de Administrador para evitar que a sessão atinja o tempo limite enquanto você trabalha.

Caixa de ferramentas de mapa

A caixa de ferramentas do mapa é exibida quando você passa o mouse sobre o container do mapa.

Ferramenta	Ícone	Descrição
Mover		Move o mapa para outra posição no palco.
(rótulo)	Map	Identifica o contêiner de conteúdo atual como um mapa. Passe o mouse sobre o contêiner do mapa para ver a caixa de ferramentas.
Configurações		Abre a página Editar mapa, onde é possível alterar as propriedades do mapa e do container.
Ocultar		Oculta o mapa atual.
Mostrar		Mostra o mapa oculto.
Duplicar		Faz uma cópia do mapa.
Remover		Exclui o mapa do estágio.

NOTE

Os elementos ocultos são armazenados no banco de dados e invisíveis para os clientes. No entanto, esses elementos são visíveis para mecanismos de pesquisa e outros bots que rastreiam seu site. Eles também são retornados como parte do conteúdo, se solicitado por meio de uma chamada de API com um atributo de invisibilidade, a menos que você os remova do estágio.

Configurar o Google Maps para o seu administrador

Antes de adicionar um mapa, primeiro abra uma conta para uma avaliação gratuita da Plataforma Google Maps. O teste grátis dura 12 meses e inclui um crédito de 300 dólares. Se você consumir seu crédito, a Google não cobrará sua conta sem sua permissão.

Etapa 1: Obtenha sua chave de API do Google Maps

Se você já tiver uma chave Google Maps, use um dos procedimentos a seguir para obter a chave de API necessária para a configuração. Para configurar uma chave Google Maps, você deve ser um administrador do site autorizado a habilitar o faturamento de sua conta. Se você não estiver pronto para configurar uma conta da Plataforma Google Maps, ignore esta etapa e use o mapa de espaço reservado por enquanto.

Vá para o Console da Google Cloud Platform.
Clique na lista suspensa do projeto e selecione ou crie o projeto ao qual deseja adicionar uma chave de API.
Para configurar suas credenciais de API, siga as instruções nas documentações de Google Maps.
Copie sua chave de API na área de transferência.

Etapa 2: configurar Google Maps em Commerce

Na barra lateral Admin, vá para Stores > Settings>Configuration.
No painel esquerdo, em General, escolha Content Management.
Expandir Advanced Content Tools.

Para obter mais informações sobre as opções de configuração das Ferramentas Avançadas de Gerenciamento de Conteúdo, consulte o Guia de Referência de Configuração.
Para Google Maps API Key, cole a chave que você copiou na etapa 1.
Clique em Test Key.

Se houver um problema com sua chave, retorne ao site da Plataforma Google Maps para resolver o problema. Em seguida, tente novamente.
Após verificar sua chave, clique em Save Config.

Adicionar um mapa ao estágio

Abra a página, o bloco ou o bloco dinâmico no espaço de trabalho Page Builder.
No painel Page Builder, expanda Media e arraste um espaço reservado Map para o estágio.

Se a Plataforma Google Maps estiver configurada para o seu armazenamento, um mapa será exibido para o local do seu armazenamento.

Se a Plataforma Google Maps ainda não estiver configurada para o armazenamento, será exibido um mapa de espaço reservado.

Adicionar um local de mapa personalizado

Passe o mouse sobre o contêiner do mapa para exibir a caixa de ferramentas e escolha o ícone Configurações ( ).
No canto superior direito da página Edit Map, clique em Add Location.
Insira o Location Name que você deseja associar ao pin no mapa.
Colete as coordenadas de localização que deseja usar para a localização personalizada.

Como alternativa, na caixa Position, você pode arrastar o pino no mapa exibido.

Se necessário, vá para Google Maps em uma nova janela de navegador e use um dos seguintes métodos para obter as coordenadas:

Método 1: Copiar da URL
- No canto superior esquerdo, digite o endereço na caixa Search e clique no ícone Pesquisar ( ).
- Copie as coordenadas no URL e cole-as em um bloco de notas.
Método 2: Copiar de "O que há aqui?"
- Clique com o botão direito do mouse no pino vermelho que marca o local no mapa e escolha What’s here? no menu.
- No rótulo exibido, copie o texto, incluindo as coordenadas, e cole-o em um bloco de notas.
Insira os números, sem a vírgula, em cada uma das caixas Coordinates.

Também é possível inserir o máximo de informações restantes que você deseja que estejam disponíveis no mapa.

Preencha quaisquer outras informações que deseja associar ao local do mapa:

Opção	Descrição
Phone Number	O número de telefone do local.
Street Address	O endereço do local.
City	A cidade do local.
Region/State	A região ou o estado da localização.
Zip/Postal Code	O CEP do local.
Country	O país do local.
Comment	Todos os comentários que deseja incluir.

Quando terminar, clique em Save.

O novo local aparece no mapa e na grade de local do mapa na página Edit Map.

Estilo do mapa

Use o Assistente de Estilo de Plataforma Google Maps para aplicar um dos seis temas predefinidos ou criar um tema personalizado. Você pode gerar um arquivo JSON com as propriedades de estilo do mapa ou um link para o mapa estilizado.

Alterar o estilo do mapa

Na barra lateral Admin, vá para Stores > Settings>Configuration.
No painel esquerdo, em General, escolha Content Management.
Expandir Advanced Content Tools.
Na caixa de texto Google Maps Style, clique em Criar Estilo de Mapa.

Esta ação abre o Google Maps Assistente de Estilos da Plataforma em uma guia separada, na qual você pode definir um estilo para o projeto da Plataforma Google Maps.
Clique em Create a Style e siga as instruções fornecidas.

Quando terminar, clique em Finish.
Exporte o estilo concluído como código JSON ou como uma URL para poder adicioná-lo à configuração Commerce.
- JSON: abaixo da caixa com o código JSON gerado, clique em Copy JSON.
- URL: Abaixo da caixa com a URL gerada, clique em Copy URL.
Retorne à guia Admin do navegador e cole o código ou URL gerado na caixa Estilo do Google Maps.

Se você estiver usando uma URL, substitua o espaço reservado YOUR_API_KEY pela chave de API Google Maps. Esse URL é vinculado ao seu Google Map estilizado.
No canto superior direito, clique em Save Config.

Alterar as configurações do mapa

Passe o mouse sobre o contêiner do mapa para exibir a caixa de ferramentas e escolha o ícone Configurações ( ).
Altere as configurações básicas conforme necessário:

Opção Descrição
Height Especifica a altura do mapa exibido em pixels.
Show Controls Determina se os controles padrão do Google Map são exibidos.

Opção	Descrição
Height	Especifica a altura do mapa exibido em pixels.
Show Controls	Determina se os controles padrão do Google Map são exibidos.

Modifique as configurações de Advanced conforme necessário:

Para controlar o posicionamento horizontal do conteúdo do mapa adicionado ao contêiner, escolha um Alignment:

Opção	Descrição
`Default`	Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
`Left`	Alinha o conteúdo ao longo da borda esquerda do contêiner do mapa, com permissão para qualquer preenchimento especificado.
`Center`	Alinha o conteúdo no centro do contêiner do mapa, com permissão para qualquer preenchimento especificado.
`Right`	Alinha o conteúdo ao longo da borda direita do contêiner do mapa, com permissão para qualquer preenchimento especificado.

Defina o estilo Border aplicado a todos os quatro lados do contêiner de mapa:

Opção	Descrição
`Default`	Aplica o estilo de borda padrão especificado pela folha de estilos associada.
`None`	Não fornece nenhuma indicação visível das bordas do contêiner.
`Dotted`	A borda do contêiner aparece como uma linha pontilhada.
`Dashed`	A borda do contêiner aparece como uma linha tracejada.
`Solid`	A borda do contêiner aparece como uma linha sólida.
`Double`	A borda do contêiner aparece como uma linha dupla.
`Groove`	A borda do contêiner é exibida como uma linha com ranhura.
`Ridge`	A borda do contêiner aparece como uma linha estriada.
`Inset`	A borda do contêiner aparece como uma linha interna.
`Outset`	A borda do contêiner aparece como uma linha de saída.

Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

Cor da Borda

Opção	Descrição
Border Color	Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
Border Width	Insira o número de pixels para a largura da linha de borda.
Border Radius	Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.

(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner de mapa.

Separe vários nomes de classe com um espaço.

Insira valores, em pixels, para que Margins and Padding especifique as margens externas e o preenchimento interno do contêiner de mapa.

Insira cada valor correspondente no diagrama do contêiner de mapa.

Área de contêiner	Descrição
Margins	A quantidade de espaço em branco aplicada à borda externa de todos os lados do container.
Padding	A quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner.

NOTE

O preenchimento não está disponível para o tipo de conteúdo do Mapa.

Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Alterar o tamanho da grade

O tamanho da grade determina o tamanho do mapa relacionado a uma coluna no estágio Page Builder. Por padrão, o mapa tem 12 colunas de largura, com um máximo de 16 colunas.

Na barra lateral Admin, vá para Stores > Settings>Configuration.
No painel esquerdo, em General, escolha Content Management.
Expandir Advanced Content Tools.
Atualize as opções de grade conforme necessário:

NOTE
Se necessário, desmarque a caixa de seleção Use system value para modificar essas configurações.
- Para Default Column Grid Size, insira um novo valor para o tamanho padrão da grade.
- Para Maximum Column Grid Size, insira um novo valor para o tamanho de grade máximo padrão.
Quando terminar, clique em Save Config.

recommendation-more-help