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.
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
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
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; ?>