Mapa
O mapa ele mostra ate 20 marcadores depois ele simplesmente desaparece, no banco tem mais de 150 registros quando coloco para mostrar todos ele some da tela.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var infoWindow;
var markersData = [
<?php
require("../config/conexao.php");
$sql = mysql_query("SELECT * FROM Loja");
while($query = mysql_fetch_array($sql)){
$Rua_Av = preg_replace( '/[`^~\'"]/', null, iconv( 'UTF-8', 'ASCII//TRANSLIT', $query['Rua_Av'] ) );
$Nome = $query['NomeLoja'];
$Tel = $query['Telefone'];
$Site = $query['Site'];
$rua = str_replace(' ', '+', $Rua_Av);
$numero = $query['Numero'];
$cidade = str_replace(' ', '+', 'Sao Paulo');
$pais = 'BR';
$url = 'http://maps.google.com.br/maps/api/geocode/json?address=';
$url .= "$numero+$rua,+$cidade,+$pais&sensor=false";
$c = curl_init();
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
$conteudo = curl_exec($c);
curl_close($c);
$json = json_decode($conteudo, false);
$lat = $json->results[0]->geometry->location->lat;
$lon = $json->results[0]->geometry->location->lng;
echo'
{
lat: '.$lat.',
lng: '.$lon.',
nome: "Loja: '.$Nome.'",
morada1:"Telefone: '.$Tel.'",
morada2: "Site: '.$Site.'",
codPostal: "Rua: '.$Rua_Av.'" // não colocar virgula no último item de cada maracdor
},
';
}
echo'
{
lat: -23.5343008,
lng: -46.617352,
nome: "Loja: Teste",
morada1:"Telefone: Teste",
morada2: "Site: Teste",
codPostal: "Rua: Teste"
} // não colocar virgula no último item
';
?>
];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-23.5393383,-46.6147891),
zoom: 14,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// cria a nova Info Window com referência à variável infowindow
// o conteúdo da Info Window será atribuído mais tarde
infoWindow = new google.maps.InfoWindow();
// evento que fecha a infoWindow com click no mapa
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
// Chamada para a função que vai percorrer a informação
// contida na variável markersData e criar os marcadores a mostrar no mapa
displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
// Esta função vai percorrer a informação contida na variável markersData
// e cria os marcadores através da função createMarker
function displayMarkers(){
// esta variável vai definir a área de mapa a abranger e o nível do zoom
// de acordo com as posições dos marcadores
var bounds = new google.maps.LatLngBounds();
// Loop que vai estruturar a informação contida em markersData
// para que a função createMarker possa criar os marcadores
for (var i = 0; i < markersData.length; i++){
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var nome = markersData[i].nome;
var morada1 = markersData[i].morada1;
var morada2 = markersData[i].morada2;
var codPostal = markersData[i].codPostal;
createMarker(latlng, nome, morada1, morada2, codPostal);
// Os valores de latitude e longitude do marcador são adicionados à
// variável bounds
bounds.extend(latlng);
}
// Depois de criados todos os marcadores
// a API através da sua função fitBounds vai redefinir o nível do zoom
// e consequentemente a área do mapa abrangida.
map.fitBounds(bounds);
}
// Função que cria os marcadores e define o conteúdo de cada Info Window.
function createMarker(latlng, nome, morada1, morada2, codPostal){
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: nome
});
// Evento que dá instrução à API para estar alerta ao click no marcador.
// Define o conteúdo e abre a Info Window.
google.maps.event.addListener(marker, 'click', function() {
// Variável que define a estrutura do HTML a inserir na Info Window.
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + nome + '</div>' +
'<div class="iw_content">' + morada1 + '<br />' +
morada2 + '<br />' +
codPostal + '</div></div>';
// O conteúdo da variável iwContent é inserido na Info Window.
infoWindow.setContent(iwContent);
// A Info Window é aberta.
infoWindow.open(map, marker);
});
}
</script>Discussão (0)
Carregando comentários...