[Javascript] Problema visualizzazione posizione corrente su mappa

Akille67 · 23 Mag 2017

Salve,
sto cercando di creare uno script PHP/JAVASCRIPT che se il browser lo supporta visualizza la propria posizione su una mappa di google e premendo un pulsante cerca dei punti di interesse nella vicinanza della mia posizione.

Se invece il browser non supporta la geolocalizzazione visualizza una posizione di default e da la possibilità di inserire un indirizzo a mano o spostare il punto sulla mappa e quindi cercare i punti di interesse vicino a quest'ultimo.

Il problema è che la prima volta che vado nella pagina pur trovando le coordinate del punto in cui mi trovo non mi visualizza la posizione ma mi visualizza quella di default.

Se però esco e rientro nella pagina visualizza la posizione in modo corretto.

Credo che tutto sia legato al tempio che ci impiega la prima volta a capire la posizione.

Come posso risolvere?

Grazie Alberto

questo è il file:

find_fermate.php

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<META name="keywords" content="">     
<META name="description" content="">
<META name="Author" content="">     
<META name="Copyright" content="Copyright (c), Messindanza.it/">
<LINK href="web/images/favicon.ico" rel="Shortcut Icon" type="image/x-icon">     
<LINK href="web/images/ico-facebook.jpg" rel="image_src">
<LINK href="web/jquery.fancybox-1.3.4.css" rel="stylesheet" media="screen">     

<SCRIPT src="web/jquery.min.js"></SCRIPT>     
<SCRIPT src="web/modernizr.min.js"></SCRIPT>
<SCRIPT src="web/plusone.js" type="text/javascript"></SCRIPT>

<!-- Copy to the head section of your webpage -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mhgallery.js"></script>
<script type="text/javascript" src="js/initgallery.js"></script>
<link rel="stylesheet" href="js/mhgallery.css" type="text/css" />
<!-- End of head section codes -->


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <meta name="keywords" content="" />
    <meta name="description" content="Google Maps - Selezione indirizzo con trascinamento del marker" />
    <title>Google Maps - Selezione indirizzo con trascinamento del marker</title>
    
    <meta http-equiv="Pragma" content="no-cache" />

    <meta content="no-cache" http-equiv="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta name="robots" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="style3.css">


    <script type="text/javascript" src="jquery.js"></script> <!-- funzioni base di jquery -->


<style>
.testata {
    background-color: white;
    color: white;
    text-shadow: black 2px 2px 10px;
    border-bottom: 4px solid #961609;
    font-size: 64px;
    font-family: arial;
    font-weight: bold;
}

h1.app {
    border-bottom: 4px solid #961609;
    color: #961609;
    font-size: 50px;
    font-family: verdana, arial;
}
h2.app {
    color: #808080;
    font-size: 36px;
    font-weight: normal;
    font-family: arial, verdana;
}
h3.app {
    color: #fff; background:#474747; text-shadow: 0px 2px 3px #666;
    font-size: 36px;
    font-family: arial, verdana;
}
.fermata {
    color: #fff; background:#474747; text-shadow: 0px 2px 3px #666;
    font-size: 36px;
    font-family: arial, verdana;
}
h4.app {
    color: #000000;
    font-size: 20px;
    font-family: arial, verdana;
}
table.app, th.app , td.app {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
    font-family: arial, verdana;
    font-size: 50px;
}
table.app tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr.app:nth-child(even) {
    background-color: #ffffff;
}
a.app    {
    color: #961609;
    font-family: arial, verdana;
    text-decoration:none;
    }
a.app:visited    {
    color: #961609;
    font-family: arial, verdana;
    text-decoration:none;
    }
input.app {
    color: #000000;
    font-family: arial, verdana;
    font-size: 50px;
}
p.app {
      font-family: arial, verdana;
    font-size: 24px;

}

.nome_campoapp{ font-family:Arial, Helvetica, sans-serif; font-size:24px; font-weight:normal; font-size:30px;}


</style>


<?php

session_start();

//Recupero i dati...
$latitude = $_SESSION['latitude'];
$longitude = $_SESSION['longitude'];

if (!isset($latitude))
    {
    $latitude='38.1860136';
    $longitude='15.55650259999993';
    $luogo='';
    echo"<script type=\"text/javascript\" src=\"google_maps.js\"></script>";

    }
else
{
    $luogo='';
    echo"<script type=\"text/javascript\" src=\"google_maps.js\"></script>";
}

if (isset($_POST[ricarica]))
    $luogo='';
    echo"<script type=\"text/javascript\" src=\"google_maps.js\"></script>";


echo" <p><span class=\"label\">Ti trovi in:</span> $luogo <span id=\"location\"></span></p>";

include("config.inc.php"); //parametri di connessione al database

    if(isset($_POST['salva'])){
        $q="update utenti set indirizzo='".$_POST['indirizzo']."', citta='".$_POST['citta']."', cap='".$_POST['cap']."', provincia='".$_POST['provincia']."', lat='".$_POST['lat']."', lng='".$_POST['lng']."' where id=1";
        mysql_query($q, $db);   
    }
    
    
    //assegno all'array $row il valore dei post passati (utile in caso di ritorno errori) o, in alternativa, i valori dei campi presi dal database
    if(isset($_POST['salva']))
        $row=$_POST;
    else{
        $q="select * from utenti where id=1";
        $query=mysql_query($q, $db);
        $row=mysql_fetch_array($query);
        }
    
    ?>
    

    <div class="clear"></div>
    <div class=app>
    
    
    <form action="calcola2.php" method="post" enctype="multipart/form-data" id="form">
        
        
        <table border=0 width=100%>
        <tr>
            <td class="nome_campoapp">Indirizzo</td><td class="nome_campoapp">Città</td>
        <tr>
        <tr>
            <td><input type="text" name="indirizzo" id="indirizzo" value="<?php if(isset($row['indirizzo'])) echo $row['indirizzo'];?>" class="input" size=15/></td>
            <td><input type="text" name="citta" id="citta" value="<?php if(isset($row['citta'])) echo $row['citta'];?>" class="input"  size=15/></td>
        <tr>
        <tr>
            <td class="nome_campoapp">CAP</td><td class="nome_campoapp">Provincia</td>
        <tr>
        <tr>
            <td><input type="text" name="cap" id="cap" value="<?php if(isset($row['cap'])) echo $row['cap'];?>" class="input"  size=15/></td>
            <td><input type="text" name="provincia" id="provincia" value="<?php if(isset($row['provincia'])) echo $row['provincia'];?>" class="input"  size=15/></td>
        <tr>
<tr>
<td colspan=2 align=center>
              &nbsp;
</td>
</tr>
<tr>
<td colspan=2 align=center>
                <input type="button" value="Ricarica la mappa" name=ricarica onclick="codeAddress( $('#indirizzo').val()+', '+$('#citta').val()+' '+$('#cap').val()+' '+$('#provincia').val())">
</td>
</tr>
<tr>
<td colspan=2 align=center>

        <?php
        // se lat e lng sono state salvate su db, vengono prese di default;
        if($row['lat']!="" and $row['lng']!=""){?>
            <script type="text/javascript">


$(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showLocation);
    } else {
        $('#location').html('Geolocation is not supported by this browser.');
    }
});

function showLocation(position) {
    
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    
    $.ajax({
        type:'POST',
        url:'index_gps2.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
               $("#location").html(msg);
            }else{
                $("#location").html('Not Available');
            }
        }
    });

}

            var lat=' <?php echo $latitude; ?>';
            var lng=' <?php echo $longitude; ?>';
            $(window).load(function(){
                initialize();
            });
            </script>
        <?php
        
        // se non esistono, centro la  mappa in base all'indirizzo
        }elseif(isset($row['citta']) and $row['citta']!=''){?>
            <script type="text/javascript">
                var address="<?php echo $row['indirizzo'].", ".$row['citta']." ".$row['provincia']; ?>";
                $(window).load(function(){
                    initialize();
                    codeAddress(address);
                });
            </script>
        <?php
        
        // se non esiste nemmeno l'indirizzo, setto la mappa in un indirizzo di default
        }else{?>
            <script type="text/javascript">
                var lat='0';
                var lng='0';
                var address="Piazza Cairoli, Messina";
                $(window).load(function(){
                    initialize();
                    codeAddress(address);
                });
            </script>
        <?php }?>

        <center>
        <div id="map"></div>
</td>
</tr>
<tr>
<td colspan=2 align=center>
        <input type="hidden" name="lat" value="<?php
        if($latitude!="")
        {
            echo $latitude;
        }
        ?>" id="coord_lat" class="input" />
        <input type="hidden" name="lng" value="<?php
        if($longitude!="")
        {
            echo $longitude;
        }
        ?>" id="coord_lng" class="input" /><input type="submit" name="salva" value="Cerca Fermate" /></center>
    
    </form>
</td>
</tr>
</table>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

</body>
</html>

criric · 23 Mag 2017

Ciao, il codice è molto confuso :
includi più volte la libreria jquery e potrebbe crearti qualche conflitto
includi più volte il file google_maps.js
manca la chiusura della </head> e l'apertura del <body>
session_start() dev'essere la prima istruzione della pagina
Probabilmente il tuo problema dipende dall'uso della sessione che non viene inizializzata al primo accesso ma è difficile essere più precisi.
Non riesci a ripulire il tutto lasciando il minimo indispesabile ?
Lo hai online ?

Akille67 · 23 Mag 2017

Si è vero ora provo a sistemarlo
lo puoi vedere qua in "azione"

forse si doveva fare tutto in javascript ma non ne sono capace ....

http://www.atm.messina.it/find_fermate.php

Cerca

Cerca

[Javascript] Problema visualizzazione posizione corrente su mappa

Akille67

Utente Attivo

criric

Super Moderatore

Akille67

Utente Attivo

Discussioni simili