Campo de Mapa (Google Maps)

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

<style type="text/css">

.acf-map {
	width: 100{9eeb70f7dbe31288fb2327b386e95442712f640702adada4ce45490c3a150a0a};
	height: 400px;
	border: #ccc solid 1px;
	margin: 20px 0;
}

</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$el (jQuery element)
*  @return	n/a
*/

function render_map( $el ) {

	// var
	var $markers = $el.find('.marker');

	// vars
	var args = {
		zoom		: 16,
		center		: new google.maps.LatLng(0, 0),
		mapTypeId	: google.maps.MapTypeId.ROADMAP
	};

	// create map	        	
	var map = new google.maps.Map( $el[0], args);

	// add a markers reference
	map.markers = [];

	// add markers
	$markers.each(function(){

    	add_marker( $(this), map );

	});

	// center map
	center_map( map );

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	$marker (jQuery element)
*  @param	map (Google Map object)
*  @return	n/a
*/

function add_marker( $marker, map ) {

	// var
	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

	// create marker
	var marker = new google.maps.Marker({
		position	: latlng,
		map			: map
	});

	// add to array
	map.markers.push( marker );

	// if marker contains HTML, add it to an infoWindow
	if( $marker.html() )
	{
		// create info window
		var infowindow = new google.maps.InfoWindow({
			content		: $marker.html()
		});

		// show info window when marker is clicked
		google.maps.event.addListener(marker, 'click', function() {

			infowindow.open( map, marker );

		});
	}

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type	function
*  @date	8/11/2013
*  @since	4.3.0
*
*  @param	map (Google Map object)
*  @return	n/a
*/

function center_map( map ) {

	// vars
	var bounds = new google.maps.LatLngBounds();

	// loop through all markers and create bounds
	$.each( map.markers, function( i, marker ){

		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

		bounds.extend( latlng );

	});

	// only 1 marker?
	if( map.markers.length == 1 )
	{
		// set center of map
	    map.setCenter( bounds.getCenter() );
	    map.setZoom( 16 );
	}
	else
	{
		// fit to bounds
		map.fitBounds( bounds );
	}

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type	function
*  @date	8/11/2013
*  @since	5.0.0
*
*  @param	n/a
*  @return	n/a
*/

$(document).ready(function(){

	$('.acf-map').each(function(){

		render_map( $(this) );

	});

});

})(jQuery);
</script>

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.

<?php 

$location = get_field('google-map');

if( !empty($location) ):
?>
<div class="acf-map">
	<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>

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.

<?php if( have_rows('localizacoes') ): ?>
	<div class="acf-map">
		<?php while ( have_rows('localizacoes') ) : the_row(); 

			$location = get_sub_field('map');

			?>
			<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
				<h4><?php the_sub_field('titulo'); ?></h4>
				<p class="address"><?php echo $location['address']; ?></p>
				<p><?php the_sub_field('descricao'); ?></p>
			</div>
	<?php endwhile; ?>
	</div>
<?php endif; ?>

Deixe uma resposta