Componentes Extras

Inserindo o Google Maps

Veja como localizar um endereço no Google Maps, copiar o código de incorporação e inserir o mapa diretamente em uma página do Plone.

Incorporando um mapa em uma página

O Google Maps permite gerar um código HTML iframe para apresentar um endereço, estabelecimento ou localização diretamente dentro de uma página do site.

Localizar endereço Compartilhar Copiar HTML Inserir no Plone
01

Localize o endereço no Google Maps

Acesse o Google Maps e pesquise o endereço, local ou estabelecimento que deseja apresentar no site.

Google Maps Pesquisar endereço
02

Clique em Compartilhar

Com o endereço selecionado, localize a opção Compartilhar no painel de informações do Google Maps.

Opção Compartilhar no Google Maps
03

Escolha Incorporar um mapa

Na janela de compartilhamento, selecione a opção Incorporar um mapa.

A opção Enviar um link gera apenas o endereço para acesso ao Google Maps. Para apresentar o mapa diretamente dentro da página do site, utilize Incorporar um mapa.

Opção Incorporar um mapa no Google Maps
04

Copie o HTML do mapa

Após selecionar Incorporar um mapa, escolha o tamanho desejado e clique em Copiar HTML.

O código copiado será semelhante a: <iframe>.

O Google Maps pode disponibilizar diferentes tamanhos para a incorporação. Escolha a opção mais adequada ao espaço disponível na página.

Opção Copiar HTML no Google Maps
05

Abra a página no Plone

Crie uma nova página ou edite a página em que deseja apresentar o mapa.

No editor, acesse a opção responsável pela edição do código-fonte. Dependendo da versão/configuração do editor, ela pode aparecer como Tools, Source code ou Código-fonte.

Acesso às ferramentas do editor de páginas do Plone
06

Cole o código do Google Maps

Escolha no código-fonte a posição em que o mapa deverá aparecer e cole o código HTML copiado anteriormente.

Código-fonte Colar iframe Salvar

Para colar o código no Windows, você também pode utilizar o atalho Ctrl + V.

Inserção do código do Google Maps no código-fonte da página do Plone
07

Confira o resultado

Salve a página e verifique se o mapa está sendo apresentado corretamente no local escolhido.

Resultado da incorporação do Google Maps em uma página do Plone

Mapa incorporado à página

Depois de salvar, o mapa será apresentado diretamente dentro da página do Plone e o visitante poderá interagir com os recursos disponibilizados pelo Google Maps.