Como usar o Google Maps no Advanced Custom Fields

Um exemplo

Em um projeto, precisaremos exibir para os visitantes um local / endereço para cada postagem, com pontos marcados em um mapa.

Problema

O usuário teria que digitar a latitude e longitude do local que ela quer marcar no mapa.

Ele teria que abrir o Google Maps em outra aba, saber como pegar tais dados, e voltar para o WordPress.

Solução

Para resolver o problema acima, vamos utilizar o Plugin Advanced Custom Fields.

O campo Google Map fornece uma interface de mapa interativa para selecionar um local. Esse tipo de campo usa a API JS do Google Maps para fornecer pesquisa de preenchimento automático, pesquisa reversa de geocodificação e um marcador interativo.

Os dados são salvos e retornados em um array contendo latitude, longitude e o endereço do local.

Configurações

Center
Define a latitude e longitude do ponto central do mapa inicial.

Zoom
Define o nível de zoom inicial do mapa.

Height
Define a altura do mapa.

Para usar a API JavaScript do Google Maps, você deve primeiro registrar uma chave de API válida. Para obter uma chave de API, siga as instruções de como obter uma chave de API do Google. O campo do Google Maps requer as seguintes APIs: API JavaScript do Google Maps, API de geocodificação e API do Google Places.

Para registrar sua chave da API do Google, use um dos seguintes métodos.

// Método 1: Filtro
function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

// Método 2: Configuração
function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');

Desde a versão 5.8.6, os dados mínimos também incluirão o nível de zoom atual ao lado dos dados opcionais para número da rua, nome da rua, cidade, estado, código postal e país.

Nem todos os resultados do local retornarão valores para chaves de dados opcionais; portanto, é importante verificar primeiro se os dados existem.

Alguns dados opcionais também são fornecidos em um formato reduzido e são salvos com o sufixo-chave de “_short”.

Para exibir o local salvo em um mapa do Google, use o código auxiliar.

Código auxiliar do Google Maps

O código a seguir fornece a funcionalidade auxiliar para usar em seu projeto.