PHP + JavaScript + JQuery + Google Maps

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-->

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";
}
?>
];

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?

Mais alguém pode me ajudar? :(

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.