Avançar para conteúdo

Tudo para WordPress

Plugins, Temas, dicas de WordPress e muito mais para você que busca informação sobre este excelente CMS!

  • Twitter
  • Facebook
  • Google+
  • RSS
Entenda com funciona Assine nosso RSS

Advanced Custom Fields

Campos Personalizados para desenvolvedores, no nível mais profissional que você já viu.

Campo de Mapa (Google Maps)

Publicado em 27/03/2015 às 13h09 por Guga Alves

O campo de mapa no Google Maps cria uma interface super interativa que lhe permite selecionar um local no mapa, ou localizar um endereço. Este campo lhe mostrará um campo de busca, botão ‘localizar’, e exibirá um marcador no local marcado ou buscado. Os dados são salvos e retornados em um array contendo latitude, longitude e o endereço do local.

acf google maps

Campos adicionais deste tipo de campo

  • Center: Digite a latitude e longitude padrão para o mapa ser centralizado. Você pode descobrir a latitude e longitude de um local o buscando no Google Maps e olhando sua URL.
  • Zoom: Valor de Zoom que o mapa terá por padrão.
  • Height: Altura que o campo do mapa terá, em pixels.

Como utilizar este campo em um template WP?

Vejamos primeiro como ele funciona!

Sem valor

acf google maps sem valor

Quando o mapa carrega pela primeira vez, ele carregará com a localização definida em latitude e longitude centralizada no mapa. Por padrão, o centro do mapa estará em Melbourne, Austrália (caso você não defina um latitude e longitude).

Para posicionar o marcador, escolhendo um endereço, vocẽ pode:

  • Buscar por um endereço e selecionar uma das sugestões de local,ou simplesmente apertar Enter;
  • Clicar em ‘Find current location’, no topo superior direito. (O serviço de geolocalização do seu navegador deve estar habilitado para esta funcionalidade funcionar corretamente);
  • Clicar no local do mapa onde você quer que o marcador seja colocado.

Com valor

acf google maps field com valor

Uma vez que um marcador seja adicionado no mapa, note que Once a marker has been added, você vai notar que a busca e o ‘find my location’ são substituídos com o endereço do marcador e um botão X, para remover o valor.

Para editar o marcador, você pode:

  • Clicar no endereço e o editar manualmente;
  • Clicar no X para limpar o valor e buscar novamente;
  • Arrastar o marcador;
  • Clicar em outro local do mapa para mudar a posição do marcador.

Exemplos práticos de Código para implementação

Os exemplos de código abaixo mostram como usar um único campo Google Map para renderizar um marcador em um mapa, e também como usar um campo de repetidor juntamente com o campo Google Map para processar múltiplos marcadores em um mapa.

Ambos os exemplos requerem o seguinte CSS e JS a serem carregados na página que forem utilizados. Por favor, note que tanto o CSS e o JS pode ser modificados por você, no entanto, eles são um bom ponto de partida para entender como os dados do PHP pode ser traduzidos através de HTML para a API JS Google Map.

Por favor, note também que a API do Google é necessária para que isso funcione e está incluído no JS exigido abaixo. A API do Google Map é uma grande biblioteca para processar um mapa, no entanto, não é a única API disponíveis. Por favor, consultar o Google para qualquer outra API e tutoriais.

Required CSS & JS

Renderizando um único marcador e mapa em uma página

Neste exemplo você verá como renderizar o mapa e seu marcador. Cada marcador contém seu HTML, que será exibido em um box quando o usuário clicar no marcador, uma infoWindow criada com JS. Este exemplo é útil para lhe mostrar como carregar o mapa em uma single.

Renderizando múltiplos marcadores em um mapa em uma página

Neste exemplo, iremos carregar um campo repetidor (chamado ‘localizacoes’) com 3 sub campos; titulo (texto), descricao (textarea) e map (Google Map).

Cada marcador contém seu HTML, que será exibido em um box quando o usuário clicar no marcador, uma infoWindow criada com JS.

Seja o primeiro a comentar este artigo

Participe e deixe o seu comentário!

Procurando Temas?

Acesse o arquivo de Temas WordPress