PHP + JavaScript + JQuery + Google Maps

Enviada por André de Oliveira Ginatto 
André de Oliveira Ginatto
PHP + JavaScript + JQuery + Google Maps
11 de September de 2012 às 02:18PM
Pessoal, sou novo por aqui e novo em programação, e estou com uma buxa pra resolver.

Preciso criar uma página dinâmica. Ela já tem um painel de controle onde o usuário informa os dados e ele grava no mySql. Nesse painel, o usuário irá indicar quais os pontos que o marcador do Google Maps deve exibir, todos de uma só vez.
Quando clicarem no marcador ele deverá exibir o balão de informações sobre o local, e ao lado deverá exibir uma foto do local que está numa DIV oculta no site, que quem está no painel de controle irá colocar no servidor.



O que meu código faz e o que ele precisa fazer:

- Ele já exibe marcadores inclusos no código, no mapa; (preciso que ele insira essas informações a partir de uma busca no banco de dados mySql. Eu sei fazer essa busca em PHP, mas não em javascript);

- Meu código cria automaticamente as DIVs com as imagens na página e tem um botão que exibe e oculta todas as DIVs juntas; (porém eu preciso que ele faça isso clicando no marcador no mapa, e não no botão. Também preciso que quando ele clique em um marcador exiba a DIV correspondente ao marcador, e oculte as outras DIVs).

Alguém pode por favor me ajudar com isso??


Desde já muitíssimo obrigado!!




Meu código está abaixo:



<!--FUNÇÃO SHOW HIDE DA DIV DE IMAGENS está em JQuery-->
<script type="text/javascript">

$(document).ready(function(){

$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

</script>
<!-- FIM DA FUNÇÃO SHOW HIDE DA DIV DE IMAGENS-->



<div id="masterconteudo">

<a href="#" class="show_hide">Show/hide</a>

<!-- ESSAS SÃO AS DIV QUE LISTAM TODAS AS MINHAS IMAGENS DO SERVIDOR-->
<?php
$pasta = 'img/mapa/';

$arquivos = glob("$pasta{*.jpg,*.png,*.gif,*.bmp}", GLOB_BRACE);
foreach($arquivos as $img){?>
<div class="slidingDiv"><a href="<?php echo $img; ?>" rel="sexylightbox[galeria]"><img src="<?php echo $img; ?>" alt="" width="150"/></a></div><br />

<?php }

?>
<!-- FIM DAS DIVS QUE LISTAM TODAS AS MINHAS IMAGENS DO SERVIDOR-->

<!--MAPA DO GOOGLE MAPS-->
<div id="map" style="width: 500px; height: 400px;"></div>
<!--FIM DO MAPA DO GOOGLE MAPS-->


<!--JAVASCRIPT DO GOOGLE MAPS-->
<script type="text/javascript">


<!--LOCALIZAÇÃO DOS MARCADORES, QUE PRECISAM SER PUXADOS DO BANCO-->
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);

<!--EU PRECISO QUE QUANDO A PESSOA CLIQUE AQUI NO MARCADOR EXIBA A DIV COM A RESPECTIVA IMAGEM-->

}
})(marker, i));
}
</script>

<!--FIM DO JAVASCRIPT DO GOOGLE MAPS-->
Marcos Regis
Re: PHP + JavaScript + JQuery + Google Maps
11 de September de 2012 às 02:58PM
O que voce precisa fazer é realizar a busca e gerar a lista de locations para substituir

var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];


Seria algo assim

$sql = 'Select nome, latitude X, longitude Y, tipo from tabela...';

$locations=array();
while($data=mysql_fetch_assoc...){
$locations[]=$data;
}
?>

var locations = [
<?php
foreach($locations as $location){
echo '[\'' . $location['nome'] .'\',' . $location['X'] . ',' . $location['tipo'] . "],\r\n";
}
?>
];
André
Re: PHP + JavaScript + JQuery + Google Maps
11 de September de 2012 às 03:06PM
Certo. Isso eu consigo fazer, já é bastante ajuda!

E como eu faço para ele ocultar as divs e mostrar apenas a DIV com a imagem do ponto selecionado através do javascript?
André
Re: PHP + JavaScript + JQuery + Google Maps
12 de September de 2012 às 02:56PM
Mais alguém pode me ajudar? :(
Marcos Regis
Re: PHP + JavaScript + JQuery + Google Maps
17 de September de 2012 às 05:26AM
Isso é mais complicado de fazer.

Ocultar as divs é até fácil.
Basta saber qual o pai do grupo e usar

$('div-pai div').hide();

e depois precisa dar um show nas divs que deseja e esta parte pode não ser tão simples se elas não possuirem um atributo que as identifique individualmente.
Você precisa estar logado no PHPBrasil.com para poder enviar mensagens para os nossos fóruns.

Faça o login aqui.