Início > Diversos > Como incluir o Google Maps em seu site

Como incluir o Google Maps em seu site

É sempre bom ter a sua empresa no Google Maps. Melhora os índices de busca além de facilitar o seu cliente na hora de encontrar seu endereço.

E extremamente simples incluir o Google Maps no seu site, e hoje vamos mostrar alguns detalhes sobre as configurações na hora de incluir.

O primeiro passo é acessar o Google Maps ( http://maps.google.com.br ) e escolher o endereço certo. No caso abaixo procurei pela Prefeitura de Porto Alegre.

Após ter certeza de que seu endereço está no lugar correto ( preste atenção no lado da rua, numeração, cidade ), clique a direita no link LINK.

Na tela que irá se abrir, copie tudo do campo Colar HTML para incorporar ao website. Gerará um código parecido com esse:


Vamos dar uma rápida analisada no código gerado.

IFRAME – É algo que já está em desuso faz tempo, mas a Google continua utilizando, acredito que pela facilidade de uso. É basicamente incluir uma página HTML externa em qualquer parte da sua página, sem necessidade do uso de INCLUDES ou APIs externas.

Dentro da tag IFRAME há outras propriedades como:

width – largura
height – altura
frameborder – a borda em volta do iframe.
scrolling – barra de rolagem do mouse.
marginheight – altura da margem
marginwidth – largura da margem
src – aqui define a fonte dos dados, inclui a página externa da Google

Todo o código a partir da tag < a href= “…. é o código necessário para o link EXIBIR MAPA AMPLIADO que fica no rodapé a direita do mapa. Se você possui algum estilo geral dos links, ele receberá sua propriedades configuradas.

Se você precisar definir um estilo para o link, pode editar a propriedade STYLE ou utilizar CLASS.  ( Mais informações aqui: http://maujor.com/tutorial/sintaxetut.php )

O resultado deve ser parecido com esse:

Lembre-se de incluir a empresa ou estabelecimento no Google Maps. Você tem uma boa ferramenta nas mãos. Use-a.

Anúncios
Categorias:Diversos Tags:
  1. Nenhum comentário ainda.
  1. No trackbacks yet.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: