Vediamo di rendere un po più interessante il nostro sito con integrato Google Maps aggiungendo qualche funzione in più.
Molto spesso sulle mappe di google, come già illustrato in precedenza, si trovano i cosiddetti “marker” (piccole icone che indicano un edificio o una via o qualsiasi altra cosa sulla mappa)
Il modo più semplice di utilizzarli è sicuramente quello di richiamare quelli standard forniti da googlemap, ma qualcuno desidera probabilmente crearne una versione personalizzata.
Esistono principalmente due modi per farlo: uno caricandoli tramite un db e l’altro realizzando un file XML.
Qui di seguito vi spiegherò il secondo metodo cioè tramite lettura dell’XML

Ecco un esempio di XML che chiameremo prova.xml:

<markers>

  <marker>

    <point lng="19.936521649360656" lat="50.06055518329961" labels="XXXX"/>
    <info fullname="Casa Mia" url="http://" inidirizzo="via roma 7" telefono="12345678" />

  </marker>

</markers>

Il tag marker può essere ripetuto un’infinità di volte cioè tante quante saranno i marker che vorremmo aggiungere alla nostra mappa.
Adesso vediamo come leggere l’XML…
Queste tre funzioni javaScript andranno messe all’internno del body della pagina HTML:

<script type="text/javascript">

// il parametro di ingresso è il nome del file XML
function leggiXML(nomeXML){

	<!--L'XML viene letto diversamante a seconda del browser che utilizziamo-->

	if(document.implementation && document.implementation.createDocument){
	// *** Mozilla

		//apro il file xml
		myXMLHTTPRequest = new XMLHttpRequest();
		myXMLHTTPRequest.open("GET", nomeXML, false);
		myXMLHTTPRequest.send(null);
		//leggo il file XML
		var xmlDoc = myXMLHTTPRequest.responseXML;
		var points = xmlDoc.documentElement.getElementsByTagName("point");
		var info = xmlDoc.documentElement.getElementsByTagName("info");

    		//ciclo per ogni marker trovato
    		for (var i = 0; i < points.length; i++) {

      		var point = new GPoint(parseFloat(points[i].getAttribute("lng")) ,parseFloat(points[i].getAttribute("lat")));
 		var labels = points[i].getAttribute("labels");
		//creo il marker
		var marker = createMarker(point, info[i], labels);
		//aggiungo il marker sulla mappa
		map.addOverlay(marker);
    		}

	}else {
	// *** Explorer

		//apro il file xml
		var request = GXmlHttp.create();
		request.open("GET", nomeXML, true);
		request.onreadystatechange = function() {
	  	if (request.readyState == 4) {
	  	//leggo il file XML
	  	var xmlDoc = request.responseXML;
    		var points = xmlDoc.documentElement.getElementsByTagName("point");
		var info = xmlDoc.documentElement.getElementsByTagName("info");

		//ciclo per ogni marker trovato
    		for (var i = 0; i < points.length; i++) {
      			var point = new GPoint(parseFloat(points[i].getAttribute("lng")) ,parseFloat(points[i].getAttribute("lat")));
 			var labels = points[i].getAttribute("labels");
			//creo il marker
			var marker = createMarker(point, info[i], labels);
			//aggiungo il marker sulla mappa
			map.addOverlay(marker);
    		}

  	}

	}
	request.send(null);
	}
}//fine leggi XML

// questa funzione crea il marker
function createMarker(point,info, labels) {

        var marker = new GMarker(point);

        <!--Evento click del mouse (si apre la nuvoletta)-->
        GEvent.addListener(marker, "click", function() {
        var fullname= info.getAttribute("fullname");
        var telefono= info.getAttribute("telefono");
        var inidirizzo=info.getAttribute("indirizzo");
        var url=info.getAttribute("url");
        //creo stringa da visualizzare nella nuvoletta
        var testoHTML=fullname+"<br />"+telefono+"<br />"+inidirizzo+"<br /> "+url+"<br />";
        <!--questa istruzione serve per aggingere al marker la nuvoletta con il dettaglio...-->

        <!--quindi quando clicchiamo su di esso si aprirà la corrispondente nuvoletta.-->
        marker.openInfoWindowHtml(testoHTML);   });

      return marker;
}

function caricaMappa(){
	if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	//coordinate su cui centrare la mappa
	map.setCenter(new GLatLng(45.068150,7.688050), 10,G_HYBRID_MAP);
	<!--fate attenzione che se il vostro marker non ha coordinate molto vicine a quelle del centro della mappa-->
	//non lo vederete a meno di non avere un zoom molto basso
	leggiXML("prova.xml");
}}
// variabile globale tutte le funzioni devono vederla.
var map;
<!--appena carica la pagina esegue la funzione "caricaMappa()" che a sua volta chiamerà "leggiXML()" che caricherà tutti i marker-->
window.onload = caricaMappa;
</script>

Questo è tutto!!

Popularity: 23% [?]

Volevo segnalare questa interessante iniziativa da parte di Sang Shin di Sun Microsystems.

Un corso online su AJAX completamente online che inizierà il 4 Agosto 2006.

Tutti i dettagli qui

Popularity: 4% [?]

Articolo tratto da Pandemia, il blog di Luca Conti.

Cosa è Web 2.0 e cosa non lo è?

C’è chi sostiene che per entrare nella categoria Web 2.0, un servizio web deve offrire all’utente la possibilità di interagire e di influenzare il contenuto del servizio medesimo. Deve essere presente, in qualche modo, un “effetto network” (citazione di Emanuele), che si manifesta con un voto, una segnalazione, una interazione.

C’è chi punta invece più sull’aspetto tecnologico, la piattaforma utilizzata, le tecnologie che rendono disponibile il servizio, la grafica di un certo tipo, la disponibilità di feed RSS o di API (programma che mette in connessione un servizio con un altro), ecc.

Sposando una filosofia piuttosto che un’altra, la lista del Web 2.0 italiano che ho abbozzato si allunga o si restringe.

Che cosa toglieresti o aggiungeresti dalla lista e perchè?

Ne parla anche Sergio Maistrello.

Popularity: 3% [?]

Girovagando per internet mi sono imbattuto in un interessante articolo scritto da Daniele Florio.

AHAH: Asynchronous Html And Http

AHAH è una recente libreria che costituisce un’alternativa ad AJAX. In pratica è come avere delle include dinamiche di codice html senza effettuare il re-load delle pagine. Non necessita quindi di parsing XML così come avviene invece per AJAX ma si basa invece su inclusioni asincrone di codice html che possono provenire da file statici o da elaborazioni complicate server-side.

AHAH può essere considerato come un sottoinsieme di AJAX, proprio come (X)html è un tipo speciale di XML.
Clicca qui per leggere il resto dell’articolo

Popularity: 5% [?]

Ho trovato i risultati di un test realizzato per valutare le performance di tre framework più popolari di sviluppo per applicazioni web:

Symfony basato su PHP;
Rails basato su Ruby;
Django basato su Python;

Il verdetto è stato: Django batte Rails che a sua volta batte Symfony. Se anche voi siete ancora indecisi su quale framework adottare ecco un lista di opinioni che potrebbero agevolarvi (o complicarvi) il lavoro.

Popularity: 4% [?]

Google ha presentato Google Code, un sito dedicato ai programmatori che intendono sviluppare applicazioni che si appoggiano o sfruttano le API di Google.

Popularity: 3% [?]

Pensate ancora che le API siano dei simpatici insetti che a tempo perso producono dell’ottimo miele?
Allora è il momento di leggere “Go forth and API”, un ottimo articolo che spiega le famigerate Application Program Interfaces.

Popularity: 3% [?]

AJAX è un grande tool per creare delle applicazioni su internet estremente interessanti, ma, quando impropriamente utilizzato può causare dei grossi problemi di accessibilità .
La buona notizia è che questi problemi possono essere facilmente risolti in modo da rendere il vostro sito “usabilissimo”.

Qui potete trovare numerose guide e tutorial molto interesanti.

Popularity: 7% [?]