5 messaggi dal 26 ottobre 2011
Ho dei dati con coordinate gps su un db access e tramite una pagina dotata di un GriedView si possono leggere questi dati vedere qui http://www.arcipelagoverde.it/aree/aree.aspx
Dalla lista di aree di sosta camper vorrei aggiungerci in una colonna un pulsante che apre una pagina Google Maps. Nella mappa deve apparire con una icona il punto indicato dalle coordinate prese dalla riga del GridView.

Sono un'autodidatta del asp.net 3.5 e non so come passare i dati dalla pagina asp.net alla pagina Google Maps che è in javascript.

Nel sito uso ampiamente pagine Google Maps inserite con iFrame in asp.net, ma sono pagine in cui ho impostato le coordinate in maniera statica es: http://www.arcipelagoverde.it/Grecia/creta.aspx
Potete suggerirmi le righe di codice sia sulla pagina asp.net sia il codice javascript?
72 messaggi dal 04 agosto 2008
Ciao,
la cosa più semplice è probabilmente quella di creare una pagina statica nella quale il codice javascript che posiziona l'icona nella pagina legga latitudine e longitudine dalla querystring.
Quindi, ad esempio:
visualizzasumappa.html?lat=41,13&lon=12,14
La gridview dovrebbe quindi contenere semplicemente una colonna con i link (target="_blank" giusto per aprire un'altra finestra) con i parametri in get lat e lon correttamente valorizzati.
Spero di essere stato chiaro
Ciao
Salvo
5 messaggi dal 26 ottobre 2011
il problema è che non so come valorizzare i parametri di latitudine e longitudine passandoli dal gridview alla pagina html

la pagina html potrebbe essere così :
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3: InfoWindow</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;}
#map { width:100%; height:100%; }
.tooltip { padding:10px; text-align:left; width:300px; }
.tooltip p,  .tooltip img { float:left; display:inline; padding:0; margin:0 10px 0 0; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
latitudine = 35.240117
longitudine = 24.809299
var initialize = function() {

  var latlng = new google.maps.LatLng(latitudine, longitudine);

  var options = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };  

  var map = new google.maps.Map(document.getElementById('map'), options);
  
  var marker = new google.maps.Marker(
    {
        position: latlng,
        map: map,
        icon: 'http://google-maps-icons.googlecode.com/files/country.png',
      flat: true
    }
  );
  
  var tooltip = '<div class="tooltip">'+
        '<img src="spoleto.jpg" alt="Spoleto">'+
           '<p><strong>Comune di Spoleto</strong><br>'+
        'cap: 06049<br>'+
          'provincia: Perugia<br>'+
        'nazione. Italia</p>'+
          '</div>';
  
  var infowindow = new google.maps.InfoWindow({
    content: tooltip
  });
  
  google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
      });
  
}


window.onload = initialize;

</script>
</head>
<body>
<div id="map"></div>
</body>
</html>


come posso trasferire i campi latitudine e longitudine nella pagina html?
72 messaggi dal 04 agosto 2008
Ciao,
dividi in due il problema; iniziamo dalla fine: devi riuscire a leggere i due parametri in get (querystring) via javascript sulla pagina html della mappa.
Ad esempio puoi fare cosi' http://www.settorezero.com/wordpress/ricavare-i-parametri-delle-querystring-con-javascript/ .

ovvero, nel tuo caso, aggiungi questo
<script type="text/javascript">
function getQSParam(ParamName) {
  // Memorizzo tutta la QueryString in una variabile
  QS=window.location.toString(); 
  // Posizione di inizio della variabile richiesta
  var indSta=QS.indexOf(ParamName); 
  // Se la variabile passata non esiste o il parametro è vuoto, restituisco null
  if (indSta==-1 || ParamName=="") return null; 
  // Posizione finale, determinata da una eventuale &amp; che serve per concatenare più variabili
  var indEnd=QS.indexOf('&amp;',indSta); 
  // Se non c'è una &amp;, il punto di fine è la fine della QueryString
  if (indEnd==-1) indEnd=QS.length; 
  // Ottengo il solore valore del parametro, ripulito dalle sequenze di escape
  var valore = unescape(QS.substring(indSta+ParamName.length+1,indEnd)); 
  // Restituisco il valore associato al parametro 'ParamName'
  return valore; 
  }
</script>
dopo la chiamata alle api di google
e poi ricavi i valori con
var latitudine = getQSParam('lat')
var longitudine = getQSParam('lon')

a questo punto basta chiamare
tuapagina.html?lat=34.32&lon=12.44
e dovresti ottenere quanto richiedi...
...poi c'e' l'inizio...
s
5 messaggi dal 26 ottobre 2011
Proverò, lunedì ti farò sapere
5 messaggi dal 26 ottobre 2011
Ho provato, ma funziona solo parzialmente, nel senso che riesco a richiamare solo un parametro, il secondo se lo metto non appare nessuna mappa Google. La pagina info.html è questa:
<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3: InfoWindow</title>

<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;}
#map { width:100%; height:100%; }
.tooltip { padding:10px; text-align:left; width:300px; }
.tooltip p,  .tooltip img { float:left; display:inline; padding:0; margin:0 10px 0 0; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function getQSParam(ParamName) {
        // Memorizzo tutta la QueryString in una variabile
        QS = window.location.toString();
        // Posizione di inizio della variabile richiesta
        var indSta = QS.indexOf(ParamName);
        // Se la variabile passata non esiste o il parametro è vuoto, restituisco null
        if (indSta == -1 || ParamName == "") return null;
        // Posizione finale, determinata da una eventuale &amp; che serve per concatenare più variabili
        var indEnd = QS.indexOf('&amp;', indSta);
        // Se non c'è una &amp;, il punto di fine è la fine della QueryString
        if (indEnd == -1) indEnd = QS.length;
        // Ottengo il solo valore del parametro, ripulito dalle sequenze di escape
        var valore = unescape(QS.substring(indSta + ParamName.length + 1, indEnd));
        // Restituisco il valore associato al parametro 'ParamName'
        return valore;
    }
    
    </script>


<script type="text/javascript">
    var latitudine = getQSParam('lat')
    var longitudine = getQSParam('lon')
var initialize = function() {

  var latlng = new google.maps.LatLng(latitudine, longitudine);

  var options = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };  

  var map = new google.maps.Map(document.getElementById('map'), options);
  
  var marker = new google.maps.Marker(
    {
        position: latlng,
        map: map,
        icon: 'http://google-maps-icons.googlecode.com/files/country.png',
      flat: true
    }
  );
  
  var tooltip = '<div class="tooltip">'+
        '<img src="spoleto.jpg" alt="Spoleto">'+
           '<p><strong>Comune di Spoleto</strong><br>'+
        'cap: 06049<br>'+
          'provincia: Perugia<br>'+
        'nazione. Italia</p>'+
          '</div>';
  
  var infowindow = new google.maps.InfoWindow({
    content: tooltip
  });
  
  google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
      });
  
}


window.onload = initialize;

</script>
</head>
<body>
<div id="map"></div>
</body></html>

L'indirizzo della pagina è questo
http://www.arcipelagoverde.it/map/info.html
Se ci aggiungo i parametrihttp://www.arcipelagoverde.it/map/info.html?lat=47.5565100&lon=13.3501800
non appare nulla, forse ho sbagliato qualcosa?
Se invece ne richiamo solo uno http://www.arcipelagoverde.it/map/info.html?lat=47.5565100
Qualcosa esce.
5 messaggi dal 26 ottobre 2011
Ho risolto!!!
Ho modificato completamente la funzione:
<script type="text/javascript">
    function getQueryVariable(variable) {

        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {

            var pair = vars[i].split('=');

            if (pair[0] == variable) {
                return pair[1];
            }
        }

        return (false);
    }
    
    </script>


Mentre i dati vengono trasmessi al resto della pagina con

var latitudine = getQueryVariable('lat')
    var longitudine = getQueryVariable('lon')


Da qui in poi il codice della pagina Google Maps.

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.