Mídia - Mapa

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.

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.

Na barra lateral Admin, vá para Stores > Settings>Configuration.

No painel esquerdo, em General, escolha Content Management.

Expandir Advanced Content Tools.

{width="600" modal="regular"}

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.

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.

{width="600" modal="regular"}

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

{width="600" modal="regular"}

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

{width="600" modal="regular"}

Passe o mouse sobre o contêiner do mapa para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

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:

{width="600" modal="regular"}

Método 1: Copiar da URL

• No canto superior esquerdo, digite o endereço na caixa Search e clique no ícone Pesquisar ( {width="20"} ).

• 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:

Quando terminar, clique em Save.

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

{width="600" modal="regular"}

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.

Passe o mouse sobre o contêiner do mapa para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

Altere as configurações básicas conforme necessário:

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:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  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:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  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:

  {width="600" modal="regular"}

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  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.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Á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 note
  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.

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:

• 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.

{width="600" modal="regular"}

Quando terminar, clique em Save Config.