Categorias

Newsletter

  • Coding

    Embed no novo Google Maps

    O Google atualizou de vez o Google Maps, dessa vez sem volta ao antigo. Saiba como incorporar um mapa personalizado ao seu site Desde […]


    O Google atualizou de vez o Google Maps, dessa vez sem volta ao antigo. Saiba como incorporar um mapa personalizado ao seu site

    Desde a metade do ano passado, o Maps do Google vem recebendo mudanças, que anteriormente poderiam ser vistas pela opção do usuário. Agora é definitivo: O novo Google Maps veio pra ficar.

    A mudança visual no geral não foi radical. O que mudou mesmo foram os modos de visualização, integração dos mapas e o modo como as APIs se comportam. Ele está otimizado e um pouco lento, e a simples tarefa de implementar um mapa no site ficou mais trabalhosa.

    Anteriormente, bastava clicar em uma opção “embed”, escolher as opções de tamanho e pronto! Código gerado. Agora a opção share só permite compartilhar o link do mapa com amigos do Google+ ou enviar por email. Para “embedar” um trecho do mapa em uma página externa, você vai precisar de uma ferramenta chamada Maps Engine Lite (?)

    Trata-se de uma ferramenta criada para você salvar seus próprios mapas. Não entendo muito bem o motivo disso, acho um tiro no pé, mas devo afirmar que o modo de personalizar os pins e objetos no mapa ficou mais facilitado.

    1

    Fazendo o embed de um mapa

    Abra o Maps Engine Lite e clique em criar um novo mapa. Você será direcionado a uma tela semelhante ao Maps comum. Coloque na barra a localização que deseja. Para configurar, siga os passos:

    Clique na imagem para ampliá-la.

    Clique na imagem para ampliá-la.

    Feito isso, clique no botão verde “Share” no canto superior direito. Altere a opção de privacidade para “Público”, clicando em change.

    3

    Agora você poderá incorporar o mapa ao seu site. Clique no ícone da pasta no canto superior esquerdo e em seguida verá finalmente o botão Embed.

    4

    Infelizmente, as opções de customizá-lo visualmente praticamente não existem. Ele entrega o código pré-formatado, sem muita opção de customização. Você pode alterar o formato nas propriedades do wireframe posteriormente. Após feito isso, você pode notar uma barra preta na área superior do mapa, onde consta o nome dado ao mapa e um ícone para visualização fullscreen. Até o momento, não encontrei formas de escondê-la. Talvez numa atualização futura.

    Mapa 100%

    Muitas vezes precisamos de uma fluidez em objetos, algo que não se pode fazer com as propriedades de tamanho incorporadas ao iframe. Para resolver esse problema, acrescentamos uma div e estilizamos ela com uma linha em css.

    Exemplo:

    <div class=”fluid_map”>

    [ o código do seu embed aqui ]

    </div>

    CSS:

    .fluid_map iframe {  width: 100%; height: 300px; border: none; position:relative;}

    Conclusão

    Fazer o embed tornou-se uma tarefa pouco mais complicada, porém, a inclusão de pins e demais elementos ficou melhor. Como sabemos, o Google é uma caixinha de surpresas e quem sabe isso torne mais simples no futuro novamente? 😉

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • Brunno Tozzo

      Não sei se estou com outra versão do maps liberada p/ mim, mas a função de embed ainda funciona normalmente:

      http://imgur.com/K23AlnI