Suporte » Desenvolvendo com WordPress » Carregar coordenadas salvas e mostrar como marcadores no google maps api v3

  • Bom dia a todos.

    Estou com dificuldade para integrar campos criados no Advanced Custom Fields com o Google Maps.

    Vamos do início.

    Eu tenho um mapa pronto e funcionando que pode ser visto no endereço http://www.artfocus.com.br/neon.
    Este mapa está exibindo os marcadores de acordo com as coordenadas salvas em um arquivo.json. Porém para que tudo funcione como está, tenho que alimentar este arquivo Json manualmente, imagina ter que incluir .

    Levando em consideração que tenho todas as coordenadas salvas nos posts, através do plugin ACF.

    O que preciso é uma forma de capturar estas coordenadas gravadas e transforma-las em marcadores no mapa.

    Estou acostumado a trabalhar com o wordpress, porém me deparei com este impasse.
    Já percorri a internet toda e não encontrei alguém que já fez isso.

    Se alguém puder me ajudar desde já agradeço.
    Pode ser um tutorial que eu não tenha encontrado na rede, até apoio moral ajuda nessa hora. heheeh

    Klayton Fantin

Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • oi Klayton,

    Não sei se entendi bem a dificuldade. Você pode gerar esse Json dinamicamente na hora que carregar a página ou na hora que salvar um post, gerar o json e grava-lo no sistema de arquivos…

    Pra gerar o Json, é só fazer um Loop nos posts, pegar os metadados que você quiser, jogar tudo num array e depois dar um json_enconde.

    Mais ou menos assim:

    $posts = new WP_Query(XXX); //XXX = os parametros da sua query
    
    $json = array();
    
    while ($posts->have_posts()): $posts->the_post();
    
        $p = array(
            'title' => $title = get_the_title(),
            'ID' => = get_the_ID(),
            'lat' => get_post_meta(get_the_ID(), 'lat', true),
            'lng' => get_post_meta(get_the_ID(), 'lng', true)
            // mais o q vc quiser
        );
    
        array_push($json, $p)
    
    endwhile; 
    
    echo json_encode($p);

    Claro que você tem que montar o array no formato do Json que você precisa.

    Você pode fazer o seu javascript fazer uma requisição ajax que vai chamar uma função php que roda esse loop e cospe o json.

    ou pode botar esse loop no hook save_post e gravar o arquivo json em algum lugar sempre q um post for modificado

    ajuda?

    Obrigado leogermani,

    De certa forma sua resposta me ajudou a abrir a mente e traçar um caminho.

    Eu disse que estou acostumado com o wordpress, porém esqueci de mencionar que na parte de web design. hehehe.

    Decidi me aventurar em fazer este site para a empresa de um amigo, eu aceitei o desafio para aprender a parte avançada do wordpress, então posso dizer que o que fiz nesse site sem um programador e sem usar plugins foi algo que nunga imaginei que poderia fazer. Meu conhecimento em programação é limitado. O WordPress me surpreendeu, e é uma ótima alternativa para web designers independentes.

    Bom, digamos que metade do que vc me passou está em grego que não entendo, e a outra metade em espanhol que entendo mais ou menos.

    É claro que não quero nada mastigado, mas como falei estou iniciando agora na programação, um dia se Deus quiser estarei aqui respondendo perguntas e não fazendo.

    Vou te mostrar o que consigo acessar e imprimir.

    <?php get_header(); ?>

    <?php if (have_posts() ) : while (have_posts() ) : the_post(); ?>

    <?php $latitude = get_field(‘latitude’); ?>

    <?php $longitude = get_field(‘longitude’); ?>

    <?php $descricao = get_field(‘descricao_do_painel’); ?>

    <?php endwhile; else: ?>
    <?php endif; ?>

    <p id=”demo”></p>

    <script>
    var coords = “<?php echo $latitude ?>” + “,” + “<?php echo $longitude ?>”;
    document.getElementById(“demo”).innerHTML = coords + “</br>”;
    </script>

    <?php get_footer(); ?>

    Obrigado mais um vez.

    Isso funcionou?

    Olá,

    de certa forma funcionou, mas na hora do java script mostrar no mapa não deu nada.

    Bom, resolvi tentar de outra forma.

    Peguei os valores com php e transformei em um array, esse array transformai em Json como mostro abaixo.

    <?php if (have_posts() ) : while (have_posts() ) : the_post(); ?>
    
    <?php
    	// PHP array
    	$pontos = array(
    	    // slug, valor
    	    array('id', get_the_id()),
    	    array('titulo',get_the_title()),
    	    array('latitude',get_field('latitude')),
    	    array('longitude',get_field('longitude')),
    	    array('descricao',get_field('descricao_ponto'))
    	);
    ?>
    
    <script type="text/javascript">
    // Transformando o array do PHP em Json
    var conteudo = <?php echo json_encode( $pontos, JSON_PRETTY_PRINT ) ?>;
    
    // Acessando o Json e mostrando na tela
    document.write(
    		"ID: "          + conteudo[0][1] + "</br>" +
    		"Título: " 		+ conteudo[1][1] + "</br>" +
    		"Latitude: " 	+ conteudo[2][1] + "</br>" +
    		"Longitude: " 	+ conteudo[3][1] + "</br>" +
    		"Descrição: " 	+ conteudo[4][1] + "</br>" + "</br>"
    	);
    //Resultado
    //
    // ID: 169
    // Título: Ponto 4
    // Latitude: -15.790671
    // Longitude: -47.877631
    // Descrição: Teste
    
    // ID: 157
    // Título: Ponto 1
    // Latitude: -15.796731
    // Longitude: -47.922215
    // Descrição: Teste
    
    // ID: 97
    // Título: Ponto 2
    // Latitude: -15.798393
    // Longitude: -47.926163
    // Descrição: Teste
    
    // ID: 24
    // Título: Ponto 3
    // Latitude: -15.795755
    // Longitude: -47.925809
    // Descrição: Teste
    
    <?php endwhile; else: ?>
    <?php endif; ?>

    Até aí tudo bem, imprimiu certinho o que cadastrei, porém quando fui injetar no mapa mostrou apenas um ponto, o Ponto 3.

    Se eu apagar o ponto 3 mostra o 2, apagando o 2 mostra 0 1, e só mostra o último que cadastrei, no caso o ponto 4, se não houver nenhum outro.

    Abaixo segue o código do mapa.

    var map;
    var idInfoBoxAberto;
    var infoBox = [];
    var markers = [];
    
    // inicia o mapa
    function iniciarMapa() {
        var latlng = new google.maps.LatLng(-15.790671, -47.877631);
    
        var options = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    
        map = new google.maps.Map(document.getElementById("mapa"), options);
    }
    
    iniciarMapa();
    
    //Abre o infoBox e caso outro esteja aberto será fechado
    function abrirInfoBox(conteudo, marker) {
        if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') {
            infoBox[idInfoBoxAberto].close();
        }
    
        infoBox[conteudo].open(map, marker);
        idInfoBoxAberto = conteudo;
    }
    
    // Carrega os pontos e exibe no mapa
    function carregarPontos() {
    
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(conteudo[2][1], conteudo[3][1]),
            title: conteudo[1][1],
            map: map,
            //icon: '<?php bloginfo("template_url"); ?>/images/marcador.png',
        });
    
        var infowindow = new google.maps.InfoWindow(), marker;
    
    	google.maps.event.addListener(marker, 'click', (function(marker, i) {
    	    return function() {
    	        infowindow.setContent(conteudo[1][1] + '<br>' + conteudo[2][1] + ', ' + conteudo[3][1]);
    	        infowindow.open(map, marker);
    	    }
    	})(marker))
    
    }
    
    carregarPontos();

    Acredito que a função carregarPontos deveria estar dentro de um loop, mas não sei como fazer essa parte.

    Quando o mapa estava sendo alimentado pelo arquivo pontos.json, estava como mostro abaixo.

    function carregarPontos() {
    
        $.getJSON("http://www.artfocus.com.br/neonvegas/wp-content/themes/neonvegas/js/pontos.json", function(pontos) {
    
            var latlngbounds = new google.maps.LatLngBounds();
    
            $.each(pontos, function(index, ponto) {
    
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
                    title: "Neon Vegas Painéis",
                    //icon: 'http://www.artfocus.com.br/neonvegas/wp-content/themes/neonvegas/images/marcador.png'
                });
    
                var myOptions = {
                    content: "<h2>" + ponto.Titulo + "</h2>" + "<br>" + "Coordenadas: " + ponto.Latitude + ", " + ponto.Longitude + "<br><br>" + "<span>" +
                    ponto.Descricao + "<br><br>" + "  <a href='" + ponto.Linke + "'>" +"Mais Detalhes..." + "</a>" + "</span>",
                    pixelOffset: new google.maps.Size(-150, 0)
                };
    
                infoBox[ponto.Id] = new InfoBox(myOptions);
                infoBox[ponto.Id].marker = marker;
    
                infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
                    abrirInfoBox(ponto.Id, marker);
                });
    
                markers.push(marker);
    
                latlngbounds.extend(marker.position);
    
            });
    
            var markerCluster = new MarkerClusterer(map, markers);
    
            map.fitBounds(latlngbounds);
    
        });
    
    }

    Veja que existe um $.getJSON e um $.each, tentei de algumas formas mudar para funcionar interno sem carregar o arquivo externo, mas sem sucesso, o máximo que consegui foi exibir o Ponto 3.

    Agradeço mais uma vez a atenção.

    Klayton Fantin

Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • O tópico ‘Carregar coordenadas salvas e mostrar como marcadores no google maps api v3’ está fechado para novas respostas.