Carregar vários maps do google na mesma página

[Jeovane Carvalho 6]

Saudações senhoras e senhores, e estou com uma pequena dificuldade..

 

Preciso fazer várias requisições de vários mapas conforme os ips coletados, e a configuração para pegar as coordenadas de latitude e longitude pelo IP eu já consegui fazer, mas só gera um mapa e os outros ips correspondentes ele não aparece, pois sei que preciso criar uma requisição para carregar de cada ip um mapa, e deixei um link disponível para vocês terem ideia .

 

LINK PARA O TESTE DO MAPA DO GOOGLE

 

No link acima é a maneira como eu pretendo, mas só aparece o primeiro mapa e vejam que as coordenadas é de acordo com cada IP, e sou ciente que essas localizações não são exatas por se tratar de IPS dinâmicos.

 

SEGUE O CÓDIGO QUE ESTOU USANDO PARA O SISTEMA !

 

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#form_2').submit(function(){
beforeSend:$("#new_carregando").fadeIn(900);
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "deletar_visitantes_online.php",
data: dados,
success: function( data ){
if(data){
alert(data);
complete:$("#new_carregando").fadeOut(1400); 
}else if(data){
alert("ok");
window.self.location.href ="visitas.php";
complete:$("#new_carregando").fadeOut(1400); 
}
}
});
return false;
});
});
</script>
<?php 
include_once("config.php"); 
// A sessão precisa ser iniciada em cada página diferente
if (!isset($_SESSION)) session_start();
$session  =$_SESSION['UsuarioUSUARIO'];
header( 'Content-Type: text/html; charset=utf-8' );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );

// Verifica se não há a variável da sessão que identifica o usuário

//recebemos o parametro vindo do ajax
if($_POST['page']){
//configurações da pagina
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 10;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
//inclui o arquivo de conexão
//instanciamos nossa classe
//executamos nossa query
$sql = $MySQLi->query("SELECT id FROM visitantes_online ORDER BY id DESC LIMIT 10") or print(mysqli_error());
$total = mysqli_num_rows($sql);
$total_max=$total=10;
/* calcula a quantidade de produtos sendo exibidos no momento */
$query =$MySQLi->query("SELECT * FROM visitantes_online LIMIT ".$start.",".$per_page."");
$Quant = mysqli_num_rows($query);
?>

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 80%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

<?php
// create a new cURL resource
// fim da  Função do contador de visitas com banco de dados //
function getPage($url, $referer='', $timeout=30, $header=''){
if ($referer=='') $referer='http://'.$_SERVER['HTTP_HOST'];
if(!isset($timeout)) $timeout=30;
$curl = curl_init();
if(strstr($referer,"://")){
curl_setopt ($curl, CURLOPT_REFERER, $referer);
}
curl_setopt ($curl, CURLOPT_URL, $url);
curl_setopt ($curl, CURLOPT_TIMEOUT, $timeout);
curl_setopt ($curl, CURLOPT_USERAGENT, sprintf("Mozilla/%d.0",rand(4,5)));
curl_setopt ($curl, CURLOPT_HEADER, (int)$header);
curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($curl, CURLOPT_SSL_VERIFYPEER, 0);
$html = curl_exec ($curl);
curl_close ($curl);
return $html;
}




?>

    

<form action="" method="POST" id="form_2" name="apaga" enctype="multipart/form-data">
<div class="visitas_botao">
<input type="hidden" name="Quantidade" id="Quantidade" value="<?php echo $total_max; ?>">
<input type="submit" name="button" id="button" value="Apagar">
<input type="reset" name="button2" id="button2" value="Cancelar">
<input type="checkbox" name="chkAll" onClick="checkAll(this)"><b>Selecionar Tudo</b>
</div>
  
  
  
//*** AQUI COMEÇA O CÓDIGO PARA PEGAR AS COORDENADAS E EXIBIR O MAPA USANDO O CURL E O WHILE PARA BUSCAR TODOS OS IPS ARMAZENADOS   ***//
  
  
<?php
$i = 10;
while($result = mysqli_fetch_array($query)) {
$id=$result['id'];
$ip = $result['ip_usuario'];
$data = $result['tempo_sessao'];
echo "<br />
";
//// guarda uma copia do xml no seu servidor
$ch = curl_init("http://ip-api.com/xml/".$ip."");
$fp = fopen("feedcache.xml", "w");

curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

// carrega o arquivo, porém agora local
$xml = simplexml_load_file("feedcache.xml");
$subs = $xml->feed->entry['circulation'];
//---



$dados['sucesso'] =(string) $xml ->status;
$dados['rua'] =    (string) $xml ->country;
$dados['bairro'] = (string) $xml->region;
$dados['cidade'] = (string) $xml ->regionName;
$dados['estado'] = (string) $xml ->city;
$dados['zip'] = (string) $xml ->zip;
$dados['latitude'] = (string) $xml ->lat;
$dados['longitude'] = (string) $xml ->lon;
$dados['timezone'] = (string) $xml ->timezone;
$dados['provedor'] = (string) $xml ->isp;
$dados['empresa'] = (string) $xml ->org;
$dados['estado'] = (string) $xml ->as;
$dados['IP'] = (string) $xml ->query;



?>

<script>
     // This example displays a map with the language set to Arabic and the
      // regions set to Egypt. These settings are specified in the HTML script
      // element when loading the Google Maps JavaScript API.
      // Setting the language shows the map in the language of your choice.
      // Setting the region biases the geocoding results to that region.
      // In addition, the page's html element sets the text direction to
      // right-to-left.
      function initMap() {
        var cairo = {lat: <?php echo $dados['latitude']?>, lng:<?php echo $dados['longitude']?>};

        var map = new google.maps.Map(document.getElementById('map'), {
          scaleControl: true,
          center: cairo,
          zoom: 18
        });

        var infowindow = new google.maps.InfoWindow;
        infowindow.setContent('<b>MAPA</b>');

        var marker = new google.maps.Marker({map: map, position: cairo});
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQiIvxtURMaZKpE6Tj6hyJdfC72kgQI3g&callback=initMap"
    async defer></script>


  
  
  
  
  //*** FIM DA PARTE DE BUSCA DOS MAPAS    ***//
  
  
<div class="visitas_botao"><?php echo $id;?>
 <input type="checkbox" name="del_" value="<?php echo $id; ?>" />
<font color="#999">IP: </font><b> <?php echo $ip; ?></b>  <span style="padding:10px;margin-left:100px;color:#003366"><b> Data <?php echo $data; ?> | LATITUDE:<?php echo $dados['latitude']?> | LONGITUDE<?php echo $dados['longitude']?></b></span>MAPA: <div id="map" style="width:70%; height:300px"></div><?php echo $i++;?>
</div>
<?php
}
?>
<br /><div class="visitas_botao">
<input type="hidden" name="Quantidade" id="Quantidade" value="<?php echo $total_max; ?>">
<input type="submit" name="button" id="button" value="Apagar">
<input type="reset" name="button2" id="button2" value="Cancelar">
<input type="checkbox" name="chkAll" onClick="checkAll(this)"><b>Selecionar Tudo</b>
</div></form>





<?php
/* --------------------------------------------- */
//contamos quantos resgistros possui para controle dos botões
$resultado2 =  $MySQLi->query("SELECT COUNT(*) AS count FROM visitantes_online");
if(count($resultado2)){
foreach ($resultado2 as $res2) {
$count = $res2['count'];
}
}
//desconecta do banco
$no_of_paginations = ceil($count / $per_page);
/* ---------------Calculando a valores inicial e final para o loop----------------------------------- */
if ($cur_page >= 4) {
$start_loop = $cur_page - 1;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page +4;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 4;
$end_loop = $no_of_paginations;
}else{
$end_loop = $no_of_paginations;
}
}else{
$start_loop = 1;
if($no_of_paginations > 6)
$end_loop = 6;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul><br />";
// para habilitar o primeiro botão
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>Início</li>";
}elseif($first_btn) {
$msg .= "<li p='1' class='inactive'>Início</li>";
}
// Para permitir que o botão anterior
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='".$pre."' class='active'>Anterior</li>";
}elseif($previous_btn) {
$msg .= "<li class='inactive'>Anterior</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' id='pass_2' class='active'>{$i}</li>";
else
$msg .= "<li p='".$i."'  class='active' id='pass'>{$i}</li>";
}
// Para permitir o botão próximo
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='".$nex."' class='active'>Próximo</li>";
}elseif($next_btn) {
$msg .= "<li class='inactive'>Próximo</li>";
}
// Para ativar o botão final
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='".$no_of_paginations."' class='active'>Última</li>";
}elseif($last_btn){
$msg .= "<li p='".$no_of_paginations."' class='inactive'>Última</li>";
}
$goto = '<input type="text" class="goto" size="1"/><input type="button" id="go_btn" class="go_button" value="Seguir"/>';


$total_string = "<div class='total' a='".$no_of_paginations."'>Página <b>" . $cur_page."</b> de <b>".$no_of_paginations."</b></div>";
$msg = $msg."".$goto.$total_string."</ul></div><br />";  
// Content for pagination
//retornamos nossa var com nosso html feito
echo $msg;
}
?>

 

Tentei fazer as requisições com ajax para recarregar o script do google mas sem sucesso, mas se alguém tiver uma ideia de como fazer eu agradeço

 

 

[Jhess 46]

Tente um for dentro do while https://secure.php.net/manual/pt_BR/control-structures.for.php

[Jeovane Carvalho 6]

2 horas atrás, Jhess disse:

Tente um for dentro do while https://secure.php.net/manual/pt_BR/control-structures.for.php

Eu tentei isso , mas o script do google não respondeu.

[Jhess 46]

Mande o código com o for

[Jeovane Carvalho 6]

10 horas atrás, Jhess disse:

Mande o código com o for

VEJA....

Eu fiz umas adaptações , mas ele chega tentar carregar , mas a página fica em branco, tipo dentro do javascript google, onde implementa o map-<?php echo $id;?> <- exemplo, onde chama o id de cada mapa , e ele chega a ficar em branco mas não abre o mapa  ..

 

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#form_2').submit(function(){
beforeSend:$("#new_carregando").fadeIn(900);
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "deletar_visitantes_online.php",
data: dados,
success: function( data ){
if(data){
alert(data);
complete:$("#new_carregando").fadeOut(1400); 
}else if(data){
alert("ok");
window.self.location.href ="visitas.php";
complete:$("#new_carregando").fadeOut(1400); 
}
}
});
return false;
});
});
</script>
<?php 
include_once("../config.php"); 
// A sessão precisa ser iniciada em cada página diferente
if (!isset($_SESSION)) session_start();
$session  =$_SESSION['UsuarioUSUARIO'];
header( 'Content-Type: text/html; charset=utf-8' );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
$nivel_necessario=1; 
// Verifica se não há a variável da sessão que identifica o usuário
if (!isset($_SESSION['UsuarioID']) OR ($_SESSION['UsuarioNivel'] < $nivel_necessario)) {
// Destrói a sessão por segurança

// Redireciona o visitante de volta pro login
header("Location: restrito_2.php"); exit;
}
include_once("class/sessao.class.php");

//recebemos o parametro vindo do ajax
if($_POST['page']){
//configurações da pagina
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 10;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
//inclui o arquivo de conexão
//instanciamos nossa classe
//executamos nossa query
$sql = $MySQLi->query("SELECT id FROM visitantes_online ORDER BY id DESC LIMIT 10") or print(mysqli_error());
$total = mysqli_num_rows($sql);
$total_max=$total=10;
/* calcula a quantidade de produtos sendo exibidos no momento */
$query =$MySQLi->query("SELECT * FROM visitantes_online LIMIT ".$start.",".$per_page."");
$Quant = mysqli_num_rows($query);
?>

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 80%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
	  
	  
	  body, .modal-open .page-container, .modal-open .page-container .navbar-fixed-top, .modal-open .modal-container {
    overflow-y: scroll;
}
@media (max-width: 979px) {
    .modal-open .page-container .navbar-fixed-top {
        overflow-y: visible;
    }
}
#map-canvas {
    height: 400px;
}
    </style>

<?php
// create a new cURL resource
// fim da  Função do contador de visitas com banco de dados //

?>

    

<form action="" method="POST" id="form_2" name="apaga" enctype="multipart/form-data">
<div class="visitas_botao">
<input type="hidden" name="Quantidade" id="Quantidade" value="<?php echo $total_max; ?>">
<input type="submit" name="button" id="button" value="Apagar">
<input type="reset" name="button2" id="button2" value="Cancelar">
<input type="checkbox" name="chkAll" onClick="checkAll(this)"><b>Selecionar Tudo</b>
</div>

<?php
$i = 10;
while($result = mysqli_fetch_array($query)) {
$id=$result['id'];
$ip = $result['ip_usuario'];
$data = $result['tempo_sessao'];
$lat = $result['latitude'];
$long= $result['longitude'];
echo "<br />";


//// guarda uma copia do xml no seu servidor
$ch = curl_init("http://ip-api.com/xml/".$ip."");
$fp = fopen("feedcache.xml", "w");

curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

// carrega o arquivo, porém agora local
$xml = simplexml_load_file("feedcache.xml");
$subs = $xml->feed->entry['circulation'];
//---



$dados['sucesso'] =(string) $xml ->status;
$dados['rua'] =    (string) $xml ->country;
$dados['bairro'] = (string) $xml->region;
$dados['cidade'] = (string) $xml ->regionName;
$dados['estado'] = (string) $xml ->city;
$dados['zip'] = (string) $xml ->zip;
$dados['latitude'] = (string) $xml ->lat;
$dados['longitude'] = (string) $xml ->lon;
$dados['timezone'] = (string) $xml ->timezone;
$dados['provedor'] = (string) $xml ->isp;
$dados['empresa'] = (string) $xml ->org;
$dados['estado'] = (string) $xml ->as;
$dados['IP'] = (string) $xml ->query;



?>

<div class="mapa_texto"><a data-id="<?php echo $id;?>"  data-toggle="modal" data-target="#myModalBusca<?php echo $id;?>" class="mapa_g" title="<?php echo $id;?>">Google Mapas</a></div>






<div class="modal fade" id="myModalBusca<?php echo $id;?>" role="mapa">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Google Maps</h4>
</div>
<div class="modal-body">
<div id="map-canvas">
<div id="map<?php echo $id;?>" class="map_google"><?php echo $id;?> , <?php echo $dados['latitude'];?> , <?php echo $dados['longitude'];?></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>    

  


<div class="visitas_botao"><?php echo $id;?>
&nbsp;<input type="checkbox" name="del_" value="<?php echo $id; ?>" />
<font color="#999">IP: </font><b> <?php echo $ip; ?></b>  <span style="padding:10px;margin-left:100px;color:#003366"><b> Data <?php echo $data; ?></b></span>

MAPA: <?php echo $dados['latitude']?>,<?php echo $dados['longitude']?><?php echo $i++;?>
</div>







</div>
</div>
</div>


<script type="text/javascript">

  $(document).ready(function() {
$('#myModalBusca<?php echo $id;?>').on('shown.bs.modal', function () {
$('#myModalBusca<?php echo $id;?>').modal('show')
	
function inicializa(){
        var mapa_id = {lat: <?php echo $dados['latitude'];?>, lng: <?php echo $dados['longitude'];?>};
		var id= ('<?php echo $id;?>');
        var map = new google.maps.Map(document.getElementById('map<?php echo $id;?>'), {
          zoom: 19,
		   id: id,
          center:  mapa_id
        });
        var marker = new google.maps.Marker({
          position: mapa_id,
          map: map,
		 
        });
		google.maps.event.addDomListener(window, 'load', 'map');
}
inicializa();	 
	});
});  
//show map on modal
</script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5yuyRyfh1FQW1lK1WYHZtE_Cqf8AxQf0&callback=initMap"></script>
<?php
}
?>



<br /><div class="visitas_botao">
<input type="hidden" name="Quantidade" id="Quantidade" value="<?php echo $total_max; ?>">
<input type="submit" name="button" id="button" value="Apagar">
<input type="reset" name="button2" id="button2" value="Cancelar">
<input type="checkbox" name="chkAll" onClick="checkAll(this)"><b>Selecionar Tudo</b>
</div></form>



<?php
/* --------------------------------------------- */
//contamos quantos resgistros possui para controle dos botões
$resultado2 =  $MySQLi->query("SELECT COUNT(*) AS count FROM visitantes_online");
if(count($resultado2)){
foreach ($resultado2 as $res2) {
$count = $res2['count'];
}
}
//desconecta do banco
$no_of_paginations = ceil($count / $per_page);
/* ---------------Calculando a valores inicial e final para o loop----------------------------------- */
if ($cur_page >= 4) {
$start_loop = $cur_page - 1;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page +4;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 4;
$end_loop = $no_of_paginations;
}else{
$end_loop = $no_of_paginations;
}
}else{
$start_loop = 1;
if($no_of_paginations > 6)
$end_loop = 6;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul><br />";
// para habilitar o primeiro botão
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>Início</li>";
}elseif($first_btn) {
$msg .= "<li p='1' class='inactive'>Início</li>";
}
// Para permitir que o botão anterior
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='".$pre."' class='active'>Anterior</li>";
}elseif($previous_btn) {
$msg .= "<li class='inactive'>Anterior</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' id='pass_2' class='active'>{$i}</li>";
else
$msg .= "<li p='".$i."'  class='active' id='pass'>{$i}</li>";
}
// Para permitir o botão próximo
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='".$nex."' class='active'>Próximo</li>";
}elseif($next_btn) {
$msg .= "<li class='inactive'>Próximo</li>";
}
// Para ativar o botão final
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='".$no_of_paginations."' class='active'>Última</li>";
}elseif($last_btn){
$msg .= "<li p='".$no_of_paginations."' class='inactive'>Última</li>";
}
$goto = '<input type="text" class="goto" size="1"/><input type="button" id="go_btn" class="go_button" value="Seguir"/>';


$total_string = "<div class='total' a='".$no_of_paginations."'>Página <b>" . $cur_page."</b> de <b>".$no_of_paginations."</b></div>";
$msg = $msg."".$goto.$total_string."</ul></div><br />";  
// Content for pagination
//retornamos nossa var com nosso html feito
echo $msg;
}
?>

 

Note que agora estou tentando carregar dentro de um modal.

 

 

[Gabriel Heming 766]

Abra no navegador (de preferência o Firefox) e pressione CTRL+SHIFT+J. Ele deve abrir a lista de todos os erros javascript. Veja se não está ocorrendo nenhum.

 

Outro ponto, bem importante. Pegue o HTML gerado e valide ele: https://validator.w3.org

[Jeovane Carvalho 6]

Em 30/04/2018 at 08:43, Gabriel Heming disse:

Abra no navegador (de preferência o Firefox) e pressione CTRL+SHIFT+J. Ele deve abrir a lista de todos os erros javascript. Veja se não está ocorrendo nenhum.

 

Outro ponto, bem importante. Pegue o HTML gerado e valide ele: https://validator.w3.org

Olá Gabriel , vlw por responder , então já tinha feito isso mas existem apenas alguns erros que não fazem parte deste script, porém fz uma adaptação usando parte do script modal que muitos  usam para carregar forms ou mapas e adaptei para carregar dentro do campo que deixei no link abaixo como exemplo..

 

https://www.jcimoveisbrasil.com/visitas_on_line.php

 

Mas na verdade eu não queria que o usuário precisasse  carregar cada mapa de cada ip e sim eles carregar todos assim que atualizar a página e deste forma eu não consegui e somente invocando .modal.show para obter o resultado mas não esperado..

Veja como ficou o código:

 

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#form_2').submit(function(){
beforeSend:$("#new_carregando").fadeIn(900);
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "deletar_visitantes_online.php",
data: dados,
success: function( data ){
if(data){
alert(data);
complete:$("#new_carregando").fadeOut(1400); 
}else if(data){
alert("ok");
window.self.location.href ="visitas.php";
complete:$("#new_carregando").fadeOut(1400); 
}
}
});
return false;
});
});
</script>
<?php 
include_once("config.php"); 
// A sessão precisa ser iniciada em cada página diferente
if (!isset($_SESSION)) session_start();
$session  =$_SESSION['UsuarioUSUARIO'];
header( 'Content-Type: text/html; charset=utf-8' );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
$nivel_necessario=1; 
// Verifica se não há a variável da sessão que identifica o usuário


//recebemos o parametro vindo do ajax
if($_POST['page']){
//configurações da pagina
$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = 10;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
//inclui o arquivo de conexão
//instanciamos nossa classe
//executamos nossa query
  
  
  
  //PEGANDO OS IPS ARMAZENADOS NO BANCO
  
$sql = $MySQLi->query("SELECT id FROM visitantes_online ORDER BY id DESC LIMIT 10") or print(mysqli_error());
$total = mysqli_num_rows($sql);
$total_max=$total=10;
/* calcula a quantidade de produtos sendo exibidos no momento */
$query =$MySQLi->query("SELECT * FROM visitantes_online LIMIT ".$start.",".$per_page."");
$Quant = mysqli_num_rows($query);
?>

<form action="" method="POST" id="form_2" name="apaga" enctype="multipart/form-data">
<div class="visitas_botao">
<input type="hidden" name="Quantidade" id="Quantidade" value="<?php echo $total_max; ?>">
<input type="submit" name="button" id="button" value="Apagar">
<input type="reset" name="button2" id="button2" value="Cancelar">
<input type="checkbox" name="chkAll" onClick="checkAll(this)"><b>Selecionar Tudo</b>
</div>

<?php
$i = 10;
while($result = mysqli_fetch_array($query)) {
$id=$result['id'];
$ip = $result['ip_usuario'];
$data = $result['tempo_sessao'];
$lat = $result['latitude'];
$long= $result['longitude'];
echo "<br />";

  
  //USANDO UM LINK EXTERNO  PARA PEGAR AS COOORDENADAS PARA A LOCAÇLIZAÇÃO ATRAVÉS DO IP

//// guarda uma copia do xml no seu servidor
$ch = curl_init("http://ip-api.com/xml/".$ip."");
$fp = fopen("feedcache.xml", "w");

curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

// carrega o arquivo, porém agora local
$xml = simplexml_load_file("feedcache.xml");
$subs = $xml->feed->entry['circulation'];
//---
$dados['sucesso'] =(string) $xml ->status;
$dados['rua'] =    (string) $xml ->country;
$dados['bairro'] = (string) $xml->region;
$dados['cidade'] = (string) $xml ->regionName;
$dados['estado'] = (string) $xml ->city;
$dados['zip'] = (string) $xml ->zip;
$dados['latitude'] = (string) $xml ->lat;
$dados['longitude'] = (string) $xml ->lon;
$dados['timezone'] = (string) $xml ->timezone;
$dados['provedor'] = (string) $xml ->isp;
$dados['empresa'] = (string) $xml ->org;
$dados['cep'] = (string) $xml ->as;
$dados['IP'] = (string) $xml ->query;
?>
<style type="text/css">
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 80%;

}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}


body, .modal-open .page-container, .modal-open .page-container .navbar-fixed-top, .modal-open .modal-container {
overflow-y: scroll;
}
@media (max-width: 979px) {
.modal-open .page-container .navbar-fixed-top {
overflow-y: visible;
}
}
#map-canvas, #street-view {
height: 400px;

}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map<?php echo $id;?> {
height: 100%;
}
</style>
<div class="visitas_botao"><?php echo $id;?>
 <input type="checkbox" name="del_" value="<?php echo $id; ?>" />
<font color="#999">IP: </font><b> <?php echo $ip; ?></b>  <span style="padding:10px;margin-left:10px;color:#003366"><b> Data <?php echo $data; ?></b></span><b>CIDADE:  <?php echo $dados['cidade']?> - ESTADO: <?php echo $dados['estado']?> - PROVEDOR: <?php echo $dados['provedor']?> </b><br /><br /><a data-id="<?php echo $id;?>"  data-toggle="modal" data-target=".modal-header<?php echo $id;?>" 
class="btn btn-primary" title="<?php echo $id;?>">Carregar localização no Mapa</a><br /><br />

<!-- Modal content-->
<div class="modal-header<?php echo $id;?>"></div>
<div id="map-canvas">
<div id="map<?php echo $id;?>" class="map_google"></div>
</div>
</div>
</div>
</div>
</div>
</div>


//REQUISITANDO O GOOGLE MAPAS DO GOOGLE ADAPTANDO COM O MODAL PARA ABRIR DENTRO DO HTML E NÃO NA JANELA ESCURA.

<script type="text/javascript">
$(document).ready(function() {
var id= ('<?php echo $id;?>');
$('.modal-header<?php echo $id;?>').on('shown', function () {
$('.modal-header<?php echo $id;?>').modal('show')

function initMap() {
var myLatlng = {lat: <?php echo $dados['latitude']?>, lng: <?php echo $dados['longitude']?>};

var map = new google.maps.Map(document.getElementById('map<?php echo $id;?>'), {
zoom: 15,
center: myLatlng
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});

map.addListener('center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});

marker.addListener('click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}


initMap();
$('.modal-header<?php echo $id;?>').modal('hide');
});
}); 
//show map on modal
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5yuyRyfh1FQW1lK1WYHZtE_Cqf8AxQf0&callback=initMap">
</script>
<?php
}
?>

<br /><div class="visitas_botao">
<input type="hidden" name="Quantidade" id="Quantidade" value="<?php echo $total_max; ?>">
<input type="submit" name="button" id="button" value="Apagar">
<input type="reset" name="button2" id="button2" value="Cancelar">
<input type="checkbox" name="chkAll" onClick="checkAll(this)"><b>Selecionar Tudo</b>
</div></form>



<?php
/* --------------------------------------------- */
//contamos quantos resgistros possui para controle dos botões
$resultado2 =  $MySQLi->query("SELECT COUNT(*) AS count FROM visitantes_online");
if(count($resultado2)){
foreach ($resultado2 as $res2) {
$count = $res2['count'];
}
}
//desconecta do banco
$no_of_paginations = ceil($count / $per_page);
/* ---------------Calculando a valores inicial e final para o loop----------------------------------- */
if ($cur_page >= 4) {
$start_loop = $cur_page - 1;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page +4;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 4;
$end_loop = $no_of_paginations;
}else{
$end_loop = $no_of_paginations;
}
}else{
$start_loop = 1;
if($no_of_paginations > 6)
$end_loop = 6;
else
$end_loop = $no_of_paginations;
}
/* ----------------------------------------------------------------------------------------------------------- */
$msg .= "<div class='pagination'><ul><br />";
// para habilitar o primeiro botão
if ($first_btn && $cur_page > 1) {
$msg .= "<li p='1' class='active'>Início</li>";
}elseif($first_btn) {
$msg .= "<li p='1' class='inactive'>Início</li>";
}
// Para permitir que o botão anterior
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$msg .= "<li p='".$pre."' class='active'>Anterior</li>";
}elseif($previous_btn) {
$msg .= "<li class='inactive'>Anterior</li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$msg .= "<li p='$i' id='pass_2' class='active'>{$i}</li>";
else
$msg .= "<li p='".$i."'  class='active' id='pass'>{$i}</li>";
}
// Para permitir o botão próximo
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$msg .= "<li p='".$nex."' class='active'>Próximo</li>";
}elseif($next_btn) {
$msg .= "<li class='inactive'>Próximo</li>";
}
// Para ativar o botão final
if ($last_btn && $cur_page < $no_of_paginations) {
$msg .= "<li p='".$no_of_paginations."' class='active'>Última</li>";
}elseif($last_btn){
$msg .= "<li p='".$no_of_paginations."' class='inactive'>Última</li>";
}
$goto = '<input type="text" class="goto" size="1"/><input type="button" id="go_btn" class="go_button" value="Seguir"/>';


$total_string = "<div class='total' a='".$no_of_paginations."'>Página <b>" . $cur_page."</b> de <b>".$no_of_paginations."</b></div>";
$msg = $msg."".$goto.$total_string."</ul></div><br />";  
// Content for pagination
//retornamos nossa var com nosso html feito
echo $msg;
}
?>