Geolocalizzazione con nome città

**Artack** · 31-01-2017, 13:42

Salve, ho trovato uno script per la geolocalizzazione però mi da un problema con la visualizzazione della mappa.

dal questo link visualizzo solo le coordinate:

http://www.filmlux.it/local/1.html

da questo visualizzo le coordinate e dovrei visualizzare anche la mappa

http://www.filmlux.it/local/2.html

solo che nel secondo link non mi visualizza la mappa e mi da il seguente errore (allego anche l'immagine) :

Spiacenti, si è verificato un problema.
Google Maps non è stata caricata correttamente. Per i dettagli tecnici, consulta la console JavaScript.

errore-mappa.jpg

Poi vorrei chiedervi, come faccio a visualizzare oltre alle coordinate anche il nome della città?

Grazie

**Artack** · 02-02-2017, 18:26

Salve, ho trovato la causa dell'errore che non mi fa visualizzare la geolocalizzazione su chrome.

il problema è il seguente:

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

e cioè che

getCurrentPosition() e watchPosition() non funzionano più sulle origini insicure. E che dovrei passare ad una origine sicura come ad esempio HTTPS.

Non c'è un'altra soluzione per aggirare questo ostacolo?

Grazie

**Artack** · 02-02-2017, 19:08

Ok risolto. Su aruba per chi ha un hosting si può attivare un Certificato SSL gratuitamente.

Adesso riesco a visualizzare le coordinate, però vorrei chiedervi, come faccio a visualizzare oltre alle coordinate anche il nome della città?

Grazie

**Little Hawk** · 02-02-2017, 20:41

Hai bisogno di fare reverse geocoding per ottenere quelle informazioni. E.g. guarda sotto.
In questo esempio sto usando la API di google maps con jQuery per ottenere il JSON necessario. Nell'esempio estrae l'indirizzo completo ma ovviamente puoi estrarre solo quello che ti server tipo la citta' - il formato dati e' questo: http://maps.googleapis.com/maps/api/...2&sensor=false

codice:

		function showPosition(p)
		{
			var latitude = parseFloat( p.coords.latitude );
			var longitude = parseFloat( p.coords.longitude );
			document.getElementById('current').innerHTML="latitude=" + latitude + " longitude=" + longitude;


			$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude +"," + longitude + "&sensor=false", function(data) {
				var pos=new google.maps.LatLng( latitude , longitude);
				map.setCenter(pos);
				map.setZoom(14);


				var infowindow = new google.maps.InfoWindow({
				    content: "<strong>" + data.results[0].formatted_address + "</strong>"
				});


				var marker = new google.maps.Marker({
				    position: pos,
				    map: map,
				    title:"Tu sei qui"
				});


				google.maps.event.addListener(marker, 'click', function() {
				  infowindow.open(map,marker);
				});
			});
		}

**Artack** · 03-02-2017, 00:28

Per la geolocalizzazione (solo con le coordinate) ho fatto così:

codice:

<script src="http://maps.google.com/maps/api/js?key=TUO_API&sensor=true"></script><script type="text/javascript">
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(mia_posizione);
}else{
  alert('La geo-localizzazione NON è possibile');
}


function mia_posizione(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  document.getElementById('posizione').innerHTML = 'La tua posizione: ' + lat + ',' + lon;  
}


</script>

<div id="posizione">Attendere prego...</div>

per fare il reverse geocoding suggerito da Little Hawk come posso implementarlo insieme al mio?
A me serve solo il nome del luogo non la mappa.

Grazie

**Little Hawk** · 03-02-2017, 11:31

Se la mappa non ti serve e vuoi soltanto visualizzare la location, vedi codice sotto (intera pagina). Se non vuoi usare jQuery dovrai scrivere un po' piu' di codice.

codice:

<html>


<head>
  <title>Geolocalizzazione con coordinate e Google Maps</title>
  <meta name="viewport" content="width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">


  <style>
    body {
      font-family: Helvetica;
      font-size: 11pt;
      padding: 0px;
      margin: 0px
    }


    #title {
      background-color: #e22640;
      padding: 5px;
    }


    #current {
      font-size: 10pt;
      padding: 5px;
    }
  </style>
</head>


<body onload="initialiseMap();initialise()">
  <h1>Geolocalizzazione con coordinate e Google Maps</h1>


  <div id="current">Initializing...</div>


  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>


  <script src="http://www.filmlux.it/local/js/geoPosition.js" type="text/javascript" charset="utf-8"></script>


  <script>
    var current = $("#current");


    var onError = function() {
      current.text("Couldn't get location");
    };


    var onSuccess = function(position) {
      $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?latlng=" + position.coords.latitude + "," + position.coords.longitude + "&sensor=false", function(data) {
        current.text(data.results[1].formatted_address);
      });
    }


    if (geoPosition.init()) {
      current.text("Receiving...");
      geoPosition.getCurrentPosition(onSuccess, onError, { enableHighAccuracy: false });
    } else {
      current.text("Functionality not available");
    };
  </script>
</body>


</html>

**Artack** · 03-02-2017, 14:59

grazie Little Hawk, ho provato però non mi visualizza nulla resta fisso su "Receiving..."

https://www.gioieecolori.com/geo/geo.html

su chrome nella barra degli indirizzi c'è uno scudo con una x rossa e mi da questo errore (vedere immagine):

"Questa pagina sta provando a caricare script di fonti non autenticate"

[IMG] http://www.gioieecolori.com/geo/errore-script.jpg [/IMG]

se clicco su Carica script non sicuri mi fa vedere la posizione, anche perchè è un problema da dispositivo mobile.
Come posso risolverlo?
Grazie

**Little Hawk** · 03-02-2017, 15:49

Devi rimuovere

codice:

<script async defer src="https://maps.google.com/maps/api/js?key=AIzaSyC6AC4u4atE8zDaoknwXQtXrgE3DCq-Q70&sensor=true"></script>

che non ti serve piu' se non ti serve la mappa, e anche

codice:

onload="initialiseMap();initialise()"

dal body tag.

Inoltre prova a mettere https invece di http nello URL che passi a getJSON.

Con una copia della tua pagina modificata cosi' per me funziona sia con Firefox che con Chrome se consento la condivisione della mia location.

**Artack** · 03-02-2017, 16:25

Adesso funziona.

Grazie per la disponibilità

**Artack** · 03-02-2017, 20:33

Problema, in Italia funziona la geolocalizzazione all'estero no.

Da Malta non visualizza ne le coordinate ne il nome del luogo.
Come è possibile?

Discussione: Geolocalizzazione con nome città

Strumenti discussione

Ricerca discussione

Visualizza

Geolocalizzazione con nome città

Permessi di invio