klaytonfantin

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