Os mapas são um aspecto essencial de qualquer site comercial. Mesmo se você é totalmente baseado na Internet, os clientes ainda gostam de saber quem você é e onde mora. O Google Maps agora é o padrão para muitos sites, pois é o mais fácil de usar, aparentemente o mais preciso e gratuito. No final deste tutorial, você saberá exatamente como incorporar um mapa do Google responsivo ao seu site.
O Google Maps padrão nem sempre é responsivo, portanto, pode não ser dimensionado para diferentes tamanhos de tela. Dependendo de você estar usando um plug-in do WordPress ou incorporando-o usando código, pode ser necessário adicionar algumas linhas de CSS para tornar o mapa responsivo.
Web design responsivo
Responsivo é um termo-chave aqui. Ele descreve o design da web que leva em conta a experiência do usuário e o dispositivo para garantir que seja o mesmo, independentemente do dispositivo usado para acessar o site. Por exemplo, um site responsivo deve oferecer a mesma qualidade de experiência, seja em um computador, tablet ou smartphone.
Para isso, o site precisa se adaptar a diferentes resoluções, tamanhos de tela e toque.
Incorporando um Mapa do Google responsivo em um site
Conheço três maneiras de incorporar o Google Maps em um site. Se você usa um tema WordPress, ele pode ter o recurso incorporado. Você também pode usar um plug-in ou incorporar código diretamente do Google em qualquer site. A primeira e a segunda opções são ótimas para os usuários do WordPress; outros CMS também usam plug-ins, para que você fique coberto por lá. A opção final, usar o código, deve funcionar na maioria dos sites, independentemente de como eles são criados.
Use um tema WordPress para incorporar um Google Map responsivo
Alguns temas do WordPress terão um recurso específico para o Google Maps. Como os mapas são fundamentais para sites modernos, alguns designers de temas os implementaram diretamente em seus designs. Se o seu tema tiver um recurso de mapa, você provavelmente precisará de uma API do Google Maps para fazê-lo funcionar. Você adiciona a API às opções de tema e ela conversará diretamente com o Google para criar o mapa a cada visita.
- Visite esta página no site do Google para iniciar o processo da API.
- Selecione o botão azul Introdução.
- Selecione o ícone do menu de três linhas na parte superior esquerda da nova tela.
- Selecione APIs e serviços e, em seguida, credenciais.
- Selecione Criar credenciais e, em seguida, chave da API.
- Selecione Restringir chave e selecione Referenciadores HTTP.
- Selecione Salvar.
- Copie a chave da API e cole-a na página de opções de design que a exige.
Depois de ter a chave da API, você pode implementar o Google Map no seu site usando as ferramentas de design de temas. Desde que o tema seja responsivo, o mapa também deve ser.
Use um plug-in para incorporar um mapa do Google responsivo
O WordPress usa plugins, o Joomla usa Extensões, o Drupal usa módulos ou plugins e outros CMS usam convenções de nomes semelhantes. De qualquer forma, os plug-ins se referem aos elementos modulares que você pode conectar ao seu CMS principal para adicionar recursos. Um recurso útil é um mapa do Google. Se o tema do seu site não incluir um elemento de mapas e você não desejar fazer o código por conta própria, um plug-in é a melhor opção.
- No WordPress, navegue até Plugins e Adicionar novo.
- Pesquise o Google Maps e selecione um plug-in que você gosta.
- Habilite-o dentro de Plugins e vá para suas Configurações.
- Adicione a API do Google Maps que você criou acima, onde indicado, e Salvar.
- Implemente o plug-in onde quiser que o mapa apareça.
Outros CMS diferem ligeiramente em suas posições de nomes e menus, mas o princípio é o mesmo. A maioria, se não todos, os plugins de mapa exigirão que a API do Google Maps funcione.
Use o código para incorporar um mapa do Google responsivo
Se você não usar o WordPress ou outro CMS, ainda poderá incorporar um mapa do Google responsivo. Você só precisa usar código em vez de um módulo. Demora um pouco mais de trabalho, mas fornece os mesmos mapas responsivos.
- Visite o Google Maps e navegue até o mapa que você deseja exibir preencher a tela.
- Selecione o link azul Compartilhar e copie o código do Incorporar mapa.
- Adicione seu código de incorporação específico ao código abaixo entre e.
- Adicione o código no HTML da sua página da web em que deseja ver o mapa.
- Salve suas alterações.
O código:
Este não é o meu código, eu o encontrei on-line, mas testei no meu site. Funciona como um encanto e deve funcionar se você usa um CMS, HTML, Hugo ou uma das muitas outras linguagens de site ou ferramentas de página.
