Nesse tutorial veremos como obter o código HTML de mapas gerados pelo Google Maps e Bing Maps e como inseri-los em suas páginas construídas no RockFunnels através do elemento embed.
​
​Primeiro veremos como obter os códigos HTML dos mapas:
​
​

1. Acesse https://www.google.com/maps
​
​2. Busque pelo local/endereço desejado no campo de busca e clique na lupa;
​
​3. Clique em Share/Compartilhar para habilitar a janela de compartilhamento;
​
​4. Clique em ‘Embed a Map’;
​
​5. Selecione o tamanho que deseja que o mapa seja apresentado em sua página;
​
​6. Clique em ‘Copy Html’ para copiar o código gerado do mapa de acordo com o tamanho selecionado.
​
​

1. Acesse https://www.bing.com/maps/

​2. Busque o local/endereço desejado no campo de busca e clique na lupa;
​
​3. Clique em ‘Mais’ e selecione a opção ‘Inserir um mapa’ para abrir a guia abaixo:
​

4. Selecione o tamanho do mapa conforme desejado;
​
​5. Selecione o tipo de mapa conforme desejado;
​
​6. Selecione o estilo do mapa conforme desejado;
​
​7. Selecione se deseja inserir links no mapa;
​
​8. Clique no botão ‘Gerar código’ para que seja gerado o código de acordo com as opções selecionadas para que possa copia-lo.
​
​

​

​Agora veremos como inserir o código HTML gerado do mapa em suas páginas através do elemento embed do RockFunnels.
​
​
​1. A imagem abaixo mostra como inserir um elemento “Embed” em uma página. Esse elemento está no final da lista de elementos dentro do construtor de páginas:

​

2. Após inserir o elemento “Embed” no local desejado irá aparecer um aviso pedindo para você clicar dentro da área do elemento para inserir/editar o código:

​

3. Após clicar será aberta uma janela para inserção/edição do código. Cole o código gerado pelo Google ou Bing Maps e depois clique no ícone em formato de X para fechar e voltar para a tela do construtor.

IMPORTANTE: Você só conseguirá ver o elemento “Embed” que nesse caso será um mapa, na página publicada. Por isso, o aviso de inserir/editar código continuará na tela do construtor.
​

​
​A imagem abaixo mostra o mapa aplicado na página publicada:
​