Foros del Web - Ver Mensaje Individual

Biribu · #4 (**permalink**) 30/03/2012, 07:33

he conseguido que me cargue los marcadores desde el fichero json. Encontre un ejemplo en internet y lo he medio adaptado a lo mio para poder entenderlo. Aun tengo que hacer mas cambios pero sin tocar casi nada, esto me "funciona":

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
    
    <style type="text/css">
.box {
    margin: 10px;
    padding: 10px;
    width: 180px;
    border: 1px solid #78BA91;
    text-align: center;
    background: #fff;
}

.mapaGoogle {
	width: 500px;
	height: 300px;
	float: left;
}
.periodical {
  border-color: #E79D35;
  float: right;
}

#periode {
    width: 30px;
    border: 1px solid #000;
    text-align: center;
}
</style>
  </head>
  <body onunload="GUnload()">

    <!-- you can use tables or divs for the overall layout -->
    <table border=1>
      <tr>
        <td>
           <div id="map" class="mapaGoogle"></div>
        </td>
        
      </tr>
    </table>
  


    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
    </noscript>


    <script type="text/javascript">
    //<![CDATA[
    if (GBrowserIsCompatible()) {
      // Display the map, with some controls
     // var map = new GMap(document.getElementById("map"));
	  var map = new google.maps.Map(document.getElementById("map"));  //esta declaracion o la de arriba, no se la diferencia
	  map.addControl(new GSmallMapControl());
     // map.addControl(new GLargeMapControl()); //Quitado porque genera doble los botones de zoom y desplazamiento
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(43.4669443349282,-3.862788677215576),9);
   
      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
     // var side_bar_html = "";
     // var gmarkers = [];
     // var htmls = [];
     // var i = 0;

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
       // GEvent.addListener(marker, "click", function() {
       //   marker.openInfoWindowHtml(html);
       // });
        // save the info we need to use later for the side_bar
        //gmarkers[i] = marker;
        //htmls[i] = html;
        // add a line to the side_bar html
        //side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br>';
        //i++;
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

      // ================================================================
      // === Define the function thats going to process the JSON file ===
      process_it = function(doc) {
        // === Parse the JSON document === 
        var jsonData = eval('(' + doc + ')');
        
        // === Plot the markers ===
        for (var i=0; i<jsonData.markers.length; i++) {
          var point = new GLatLng(jsonData.markers[i].lat, jsonData.markers[i].lng);
          var marker = createMarker(point, jsonData.markers[i].label, jsonData.markers[i].html);
          map.addOverlay(marker);
        }

        // put the assembled side_bar_html contents into the side_bar div
      //  document.getElementById("side_bar").innerHTML = side_bar_html;

        // === Plot the polylines ===
        for (var i=0; i<jsonData.lines.length; i++) { //Puedo hacer otra tabla con las coordenadas de las polilineas y meterlas en el mismo json, asi las cogeria de ahi y listo.
          var pts = [];
          for (var j=0; j<jsonData.lines[i].points.length; j++) {
            pts[j] = new GLatLng(jsonData.lines[i].points[j].lat, jsonData.lines[i].points[j].lng);
          }
          map.addOverlay(new GPolyline(pts, jsonData.lines[i].colour, jsonData.lines[i].width)); 
        }
      }          
      
      // ================================================================
      // === Fetch the JSON data file ====    
      GDownloadUrl("phpsqlajax_genjson.php", process_it);
      // ================================================================

    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/

    //]]>
    </script>
  </body>

</html>

Pongo lo de "funciona" entre comillas porque no consigo que se refresquen los marcadores sin recargar el mapa completo.

Creo que deberia usar la funcion periodical(X) siendo X el tiempo que quiero que espere entre refresco y refresco. Pero no se a que tengo que aplicar esa funcion. Tambien he visto algo sobre esta otra funcion: self.setInterval ("funcionARepetir()", 4000); Pero estoy en las mismas, no se a que...

¿Alguna idea?