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