Carregar coordenadas salvas e mostrar como marcadores no google maps api v3

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.

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