-
Testo
31 Maggio 2013
Google Maps personalizzate: più semplice di quanto credi
Da diversi anni le mappe di Google sono entrate nella vita quotidiana di tutti noi. Dopo essere diventate un punto di riferimento sul web, oggi sono fondamentali in svariate applicazione sul versante mobile, sia che si tratti di dispositivi Android che iOS.
Già da tempo è possibile incorporare le mappe che vediamo sulle pagine di Google Maps, attraverso il codice che ci viene fornito, ma non tutti sanno che con poco lavoro in più possiamo andare ben oltre! E’ possibile utilizzarle all’interno del nostro sito, personalizzandole all’occorrenza, contando anche sul fatto che i navigatori avranno già l’esperienza necessaria per utilizzarle senza problemi. Inoltre non dovremo reinventare nulla, basandoci perciò su strutture di programmazione consolidate.
Gli strumenti da utilizzare sono le Google Maps Javascript API, giunte da qualche mese alla loro terza versione. Il codice è davvero semplice (almeno per quanto concerne questo nostro esempio) e per cominciare è sufficiente inserire il link al file .js da maps.googleapis.com.
Ecco quale sarà il nostro risultato del codice che troverete di seguito:
La pagina sarà semplicissima: HTML, Javascript e un po’ di Php (per consentire la semplice scalabilità di questo micro-progetto). Il brevissimo CSS che trovate all’inizio serve per visualizzare a tutto schermo la mappa di Google, occupando completamente la pagina.
Partiamo da uno scheletro iniziale di codice:
// Qui metteremo del codice Php (1)
<!DOCTYPE html>
<html lang=”it” dir=”ltr”>
<head>
<meta charset=”UTF-8” />
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<style type=”text/css”>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0;}
#map-canvas { height: 100% }
</style>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false”></script>
<script type=”text/javascript”>
// Qui metteremo il codice javascript per personalizzare la mappa (2)
</script>
</head>
<body>
<div id=”map-canvas”/>
</body>
</html>
Ecco il codice Php da inserire prima del codice HTML (1). Lo utilizzeremo per definire le coordinate del punto centrale di visualizzazione e per costruire gli array dei punti di interesse che vorremo mostrare sulla mappa.
<?php
$latitudine_centro = 45.5597216;
$longitudine_centro = 10.2087184;
// Qui avviene la costruzione della stringa dei punti di interesse.
// Il codice è costruito in modo che possa essere facilmente sostituito per recuperare
// i valori con un ciclo tramite query Sql.
$stinga_coords = “”;
$stringa_descrizioni = “”;
// Aggiungo il punto di interesse 1
$stringa_coords .= “new google.maps.LatLng(45.539797,10.220049),”;
$stringa_descrizioni .= “‘Piazza della Loggia’,”;
// Aggiungo il punto di interesse 2
$stringa_coords .= “new google.maps.LatLng(45.532867,10.213057),”;
$stringa_descrizioni .= “‘Stazione FS’,”;
// Aggiungo il punto di interesse 3
$stringa_coords .= “new google.maps.LatLng(45.50829,10.232128),”;
$stringa_descrizioni .= “‘Casello Autostrada di Brescia Centro’,”;
// Aggiungo il punto di interesse 4
$stringa_coords .= “new google.maps.LatLng(45.552013,10.181735),”;
$stringa_descrizioni .= “‘Palasport San Filippo’,”;
// Tolgo la virgola finale, sempre nell’ottica di costruire automaticamente
// da database la stringa dei punti di interesse
$stringa_coords = substr($stringa_coords,0,-1);
$stringa_descrizioni = substr($stringa_descrizioni,0,-1);
?>
Ora posizioniamo questo codice Javascript nel punto (2).
// definisco l’oggetto che rappresenta il centro della mappa,
// a cui passo le coordinate (variabili Php)
var centro = new google.maps.LatLng(<?php echo $latitudine_centro; ?>,<?php echo $longitudine_centro; ?>);
// definisco l’array dei punti di interesse, a cui passo la stringa costruita in Php
var puntiinteresse = [<?php echo $stringa_coords; ?>];
// definisco l’array delle descrizioni, a cui passo la stringa costruita in Php
var descrizioni = [<?php echo $stringa_descrizioni; ?>];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: centro
};
map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
var originMarker = new google.maps.Marker({
position: centro,
map: map,
icon: ‘voxart.png’
});
}
function drop() {
for (var i = 0; i < puntiinteresse.length; i++) {
setTimeout(function() {
addMarker();
}, i * 300);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: puntiinteresse[iterator],
map: map,
draggable: true,
title: descrizioni[iterator],
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, ‘load’, initialize);
google.maps.event.addDomListener(window, ‘load’, drop);
La funzione initialize() definisce le opzioni principali della mappa (il livello di zoom, la tipologia della mappa – in questo caso roadmap, quella classica di Google ed infine il punto in cui centrare la mappa, definito dall’oggetto centro).
Viene poi creato l’oggetto mappa (di tipo map) a cui vengono assegnate le opzioni definite.
Infine creiamo l’oggetto originMarker che altro non è che l’iconcina che viene posizionata al centro della mappa; basta definire la sua posizione (centro), la mappa di riferimento (map) e l’URL da utilizzare come immagine (in questo caso, una .png con il logo di Voxart).
La funzione drop() viene usata soprattutto per questioni “sceniche”, ovvero per posizionare i punti di interesse sulla mappa con una gradevole animazione. I punti cadono dall’alto in modo temporizzato (uno alla volta ogni 300 millisecondi, come indicato in setTimeout).
drop() richiama ciclicamente, per ogni elemento dell’array puntiinteresse, la funzione addMarker(). Tale funzione viene usata per inserire con un push i marker nell’array degli elementi da mostrare sulla mappa; per ognuno di essi vengono definite le coordinate (position, presa dall’array puntiinteresse), la mappa di riferimento (map), la possibilità di spostare il market (draggable), il titolo da mostrare quando ci posizioniamo sul marker col cursore (title, preso dall’array descrizioni) ed infine il tipo di animazione da utilizzare per l’ingresso (animation).
Le ultime 2 righe avviano le funzioni initialize() e drop() non appena la finestra è stata caricata.
Tutto abbastanza semplice, non trovate? Non resta che iniziare a personalizzare le Google Maps.
La demo funzionante di quanto avete letto la potete trovate sul sito di Voxart a questo indirizzo:
http://www.voxart.it/demo/googlemaps/mappa.php
Potete scaricare tutto il codice di questo esempio da qui:
http://www.voxart.it/demo/googlemaps/googlemaps.zip
Fonti:
https://developers.google.com/maps/documentation/javascript/
di Massimo Cinquini, Web Developer @ Voxart
-
Testo
28 Giugno 2012
Costruire con i Lego su Google
Un’interessante progetto vede una particolare partnership tra Google e i mattoncini più famosi del mondo, i LEGO.
Build With Chrome è il nome di questo esperimento che permette agli utenti che utilizzano il browser Chrome di poter costruire su un pezzettino di Australia la loro opera con i mattoncini LEGO che, utilizzando una grafica 3D possono essere posizionati liberamente in diverse forme, dimensioni e colori.
L’obbiettivo di questo progetto è quello di trasformare le mappe che possiede Google in un mondo realizzato con una “costruzione collaborativa”.
Potete accedere già da questo momento al sito http://www.buildwithchrome.com dove cliccando su Start Building inizierete ad elaborare la vostra opera che potrete anche mandare a Google e, nel caso fosse giudicata idonea, sarà visibile pubblicamente.
Per ora, come detto in precedenza, potete prendervi solo lotti di “terra” Australiana ma gli stessi sviluppatori affermano che presto il progetto verrà esteso ad altre regioni geografiche.
Eccovi il video di promozione che sta già riscuotendo successo e condivisione. Potete anche vedere altri video realizzati dagli utenti presenti nella rete che mostrano la costruzione di palazzi, ponti, città e…cantanti lirici, sempre con i mattoncini LEGO e con Build with Chrome ovviamente.
Buon divertimento!
-
Testo
13 Giugno 2012
Quanti dati vengono generati ogni minuto?
Si sa, il web non dorme mai.
Ed ecco una bella infografica dallo stile vintage che ci mostra effettivamente il traffico frenetico che generiamo stando anche solo seduti davanti al pc o toccando il nostro smartphone.
Fonte: Domo
-
Testo
25 Maggio 2012
Alexcolor.it | Benvenuti in un mondo di colori
Web Aziendale
Il cliente Alexcolor, realtà consolidata nel “mondo del colore”, si dedica ai professionisti del settore vantando uno showroom interessante che lo distingue dagli attuali competitors di zona. Il negozio oltre a disporre di un magazzino destinato all’utenza professionale ha la necessità di comunicare i propri servizi in un modo ben più dinamico rispetto ai canali tradizionali.
Per far questo è stato realizzato un sito con tecnologia legata a wordpress dove l’utente oltre ad essere informato su corsi, occasioni, prodotti in vendita può interagire attivamente confrontandosi nel blog.
Visita il sito: www.alexcolor.it -
Foto
21 Marzo 2012
Soundcenter.info
Negozio Hi-FiNegozio storico a Brescia dedicato al settore Hi-Fi sin dagli anni ’70, Sound Center si è sempre contraddistinto per la qualità dei prodotti proposti e per l’attenzione rivolta alle ultimissime tecnologie disponibili sul mercato. Competenza e professionalità nella realizzazione d’impianti Hi-Fi, home theatre, proiezione, multi-room, automazione domestica, impianti professionali per aziende e comunità e sale conferenza. Questi valori migrano sul web grazie alla progettualità del sito web realizzato con l’intento di trasmettere una continuità tangibile con l’immagine del negozio, elegante e semplice, che focalizza all’attenzione sui prodotti e sulla loro altissima qualità, unito ad una comunicazione più informale e diretta tramite pagina Facebook.
-
Foto
10 Novembre 2011
9
NoteSolelunagroup.com
Bonifiche ambientali
Il cliente, società che opera attivamente nel settore ambientale del campo delle bonifiche, necessitava di un sito che comunicasse la vicinanza alle tematiche attuali delle operazioni eco-compatibili sul territorio. Per far questo abbiamo scelto di non utilizzare sistemi ortodossi affidandoci ad immagini evocative legate alla Natura realizzate dal fotografo Mario Bontempi, per esaltare la particolarità di questa azienda di nicchia.
-
-
Banalità su carta.
L’esperienze della vita ti cadono addosso. Così fissando il lampadario della stanza si sentiva soffocare delle molte esperienze...
-
Coca Cola - ExperimentalUn diseño de botellas de Coca Cola al estilo de la moda.
-
Zoombie Movie Posters
-
-
-
“Red Bull gives you wiiings”. - “Red Bull Kanatlandırır.”
-
Great Greenpeace ADV: The Bomb - Harika Greenpeace reklamı: Bomba
