Criar página de localização com Advanced Custom Field e sem API

Olá pessoal, eu quero mostrar para vocês como criar página de localização com Advanced Custom Field e sem API do Google.

Eu vou utilizar a forma free do mesmo que esta no repositório do WordPress.

Primeiro de tudo ou vou criar uma página pelo painel de criação, eu vou nomear ela como “Localização” mas isso fica do seu critério.

Eu gosto de criar uma página modelo, para que se precisar alterar o nome ou alguma coisa referente a página não de algum conflito com a configuração do ACF que vamos criar.

Se você trabalha com um tema personalizado ou premium é só copiar a page.php e aproveitar todo o arquivo só deixando o bloco central limpo.

Vou deixar um exemplo simples abaixo:

	<?php
	/*
	* Template Name: Localização
	* Template Post Type: page
	*/
	get_header();
	?>
	<div id="content" class="site-content container py-5 mt-5">
	<div id="primary" class="content-area">
	<div class="row">
	<div class="col-12">
	<main id="main" class="site-main">
	<header class="entry-header">
	<?php the_title('<h1>', '</h1>'); ?>
	</header>
	<div class="entry-content">
	<?php the_content(); ?>
	<!-- Adicione aqui o loop de localização -->
	</div>
	</main>
	</div>
	</div>
	</div>
	</div>
	<?php
	get_footer();

view raw page-localizacao.php hosted with ❤ by GitHub

Antes de tudo, hoje em dia você precisa ter uma conta no Google Maps Platform para ter acesso a API. Esse necessidade de conta premium é desde 2018 que o Google mudou alguns termos de uso e esse serviço passou a ser pago por acesso.

Então nesse tutorial eu vou mostrar uma forma alternativa e totalmente grátis para criar um iframe sem a necessidade de pagamento .

Por isso que vamos ter que utilizar um site externo para encontrar a Latitude e Longitude do nosso endereço é um pouco mais “chatinho” mas não tem segredo nenhum.

Criando a Página Personalizada

Vamos criar a nossa página dentro do WordPress, já com o nosso arquivo page-localizacao.php já foi criado anteriormente da forma que eu mostrei para vocês, lembrando que precisa ter o cabeçalho como esta dentro do arquivo de exemplo.

Agora com a página criada é só vinculada ao modelo de página Localização e vamos partir para os campos personalizados.

Criando os Campos Personalizados

Eu crie três campos personalizados, o primeiro é um campo de “Mensagem” nele eu falo a necessidade do site externo junto com o link do mesmo.

E depois criei dois campos de texto simples que vão receber os dados de Latitude e Longitude.

Para facilitar para vocês eu vou deixar o JSON dos campos para que vocês possam copiar e a importar dentro do seu ACF (Campos Personalizados > Ferramentas).

	[
	{
	"key": "group_63b5c82e80cd6",
	"title": "Localização",
	"fields": [
	{
	"key": "field_63b5d064ffe62",
	"label": "ATENÇÃO!!!",
	"name": "",
	"aria-label": "",
	"type": "message",
	"instructions": "",
	"required": 0,
	"conditional_logic": 0,
	"wrapper": {
	"width": "",
	"class": "",
	"id": ""
	},
	"message": "Acesse o site abaixo para gerar as coordenadas corretas da sua localização:\r\n\r\n<a href=\"https:\/\/gps-coordinates.org\/coordinate-converter.php\" title=\"Gerar Coordenadas.\" target=\"_blank\">Gerar Coordenadas<\/a>\r\n\r\n<sub>* Procure pelo campo <strong>ADRESS<\/strong> e depois clique em <strong>Get GPS Coordinates<\/strong>.<\/sub>",
	"new_lines": "br",
	"esc_html": 0
	},
	{
	"key": "field_63b5d4ca316a9",
	"label": "Latitude",
	"name": "latitude",
	"aria-label": "",
	"type": "text",
	"instructions": "",
	"required": 0,
	"conditional_logic": 0,
	"wrapper": {
	"width": "50",
	"class": "",
	"id": ""
	},
	"default_value": "",
	"maxlength": "",
	"placeholder": "",
	"prepend": "",
	"append": ""
	},
	{
	"key": "field_63b5d4e7316aa",
	"label": "Longitude",
	"name": "longitude",
	"aria-label": "",
	"type": "text",
	"instructions": "",
	"required": 0,
	"conditional_logic": 0,
	"wrapper": {
	"width": "50",
	"class": "",
	"id": ""
	},
	"default_value": "",
	"maxlength": "",
	"placeholder": "",
	"prepend": "",
	"append": ""
	}
	],
	"location": [
	[
	{
	"param": "page_template",
	"operator": "==",
	"value": "page-localizacao.php"
	}
	]
	],
	"menu_order": 0,
	"position": "normal",
	"style": "default",
	"label_placement": "top",
	"instruction_placement": "label",
	"hide_on_screen": "",
	"active": true,
	"description": "",
	"show_in_rest": 0
	}
	]

view raw acf-localizacao.json hosted with ❤ by GitHub

Página de Cadastro – Backend

Agora com tudo configurado a sua página é para ficar assim como a da imagem abaixo com o modelo de localização junto com os campos personalizados.

Vamos gerar um endereço de teste para cadastrar as coordenadas eu vou utilizar o endereço padrão que já esta no site da GPS Coordinates, clique em “Gerar Coordenadas” e vamos para o site .

Veja que já tem um endereço padrão “New York, United States” de teste vamos pegar as coordenadas e colocar na nossa página.

Página de Localização – Frontend

Agora estamos na parte final do tutorial, vamos adicionar as variáveis junto com o loop personalizado que vai receber o nosso iframe e coordenadas.

	<?php
	// pega os nossos campos personalizados
	$latitude = get_field('latitude');
	$longitude = get_field('longitude');
	// inicio da verificação
	// verifica se os dois campos estão cadastrados
	if ($latitude && $longitude ) : ?>
	<div class="map-responsive">
	<iframe src ="https://maps.google.com/maps?q=<?php echo esc_attr($latitude); ?>,<?php echo esc_attr($longitude); ?>&hl=es;z=14&amp;output=embed" loading="lazy"></iframe>
	</div>
	<!-- Inicio do CSS para deixar o Mapa Responsivo -->
	<style type="text/css">
	.map-responsive{
	overflow:hidden;
	padding-bottom:50%;
	position:relative;
	height:0;
	}
	.map-responsive iframe{
	left:0;
	top:0;
	height:100%;
	width:100%;
	position:absolute;
	}
	</style>
	<!-- Fim do CSS -->
	<?php endif;
	// fim da verificação
	?>

view raw loop-localizacao.php hosted with ❤ by GitHub

Eu vou colocar legendas nas linhas mais importantes para que fique mais simplificado para vocês entenderem:

Legenda das Linhas

Espero que vocês tenham gostado desse tutorial e até breve.

Por favor, se você gostou deixe seu like e também se possível compartilhe.