| Precedente :: Successivo |
| Autore |
Messaggio |
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
 Inviato: 21 Mag 2007 13:31 Oggetto: [TUTORIAL] Inserire gmap nella vostra pagina web in 8 step |
 |
|
Allora vediamo come con pochi passi sara' possibile inserire una mappa gmail nella vostra pagina:
1) ISCRIZIONE ACCOUNT GOOGLE
Prima di tutto è necessario avere un utenza gmail per poter usufruire del servizio, se non avete un email @gmail.com iscrivetevi gratuitamente su http://www.gmail.com.
2) RECUPERARE LA CHIAVE PER UTILIZZARE GMAP - parte 1
una volta iscritti, collegatevi a http://www.google.com/apis/maps/ e cliccate su Sign up for a Google Map API Key:
3) RECUPERARE LA CHIAVE PER UTILIZZARE GMAP - parte 2
Scorrete la pagina fino in fondo, approvate la licenza di pubblicazione di gmap, inserite il vostro sito nel input text e premete Generate API Key:
4) RECUPERARE LA CHIAVE PER UTILIZZARE GMAP - parte 3
Google vi rilasciera' la vostra chiave con il codice da inserire nella pagina.
Il codice è tutto li, basta copiarlo nella propria pagina modificando semplicemente i valori di latitudine e longitudine e zoom:
Ma appunto, vi mancano ancora le coordinate. vediamo come recuperarle e come rendere lo script un po' + portabile.
5) RECUPERARE LE COORDINATE DEL LUOGO DA MAPPARE
collegatevi su http://maps.google.it
Cercate il vostro indirizzo e quando avete trovato la via che intendete inserire nella mappa, cliccate sul link: Collegamento a questa pagina,
controllate se tutto è ok e poi copiate il link nella barra degli indirizzi e segnatevelo da qualche parte o tenetevelo in memoria degli appunti
6) INSERIMENTO CODICE - TAG HEAD
inserite questo codice (modificato) nella sezione HEAD:
| Codice: |
<head>
<?
$keyGmap = "*AsdfssCSdddSSSsdfsdfsdfSssCsDCDSDw0923r09sdopisdofsdf";
$linkGmap = "http://maps.google.it/maps?f=q&hl=it&q=Via+Vostra+Via,+3+Blabla&sll=491.899988,19.4898152&sspn=13.498625,29.882813&ie=UTF8&om=1&ll=43.312158,10.516663&spn=0.003224,0.007296&z=17";
$testoGmap = "<em><strong>Denominazione</strong><br />via bla bla, Milano - Italy</em>";
?>
<script type="text/javascript">
//<![CDATA[
function readGmapAddress(str)
{
var arrQs,arrLatLong,arr;arrQs=str.split('&');arr= new Array;
for (i=0; i<arrQs.length; i++){
if (arrQs[i].substr(0,3)== "ll="){arrLatLong= (arrQs[i].replace("ll=","")).split(",");latLog= arrQs[i].replace("ll=","");arrLatLong=latLog.split(",");arr['lat'] = arrLatLong[0];arr['long']= arrLatLong[1];}
if (arrQs[i].substr(0,2)== "z=") {arr['zoom'] = parseInt(arrQs[i].replace("z=",""));}
if (arrQs[i].substr(0,2)== "q=") {arr['query'] = arrQs[i].replace("q=","");}
if (arrQs[i].substr(0,3)== "hl="){arr['lingua'] = arrQs[i].replace("hl=","");}}
return (arr);
}
var aGm = new readGmapAddress("<?=$linkGmap; ?>");
var latitudine = aGm['lat'];
var longitudine = aGm['long'];
var zoom = arrGmap['zoom'];
var Testo_Mappa = "<?=$TestoGmap; ?>" ;
//]]>
</script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=<?=$keyGmap; ?>"> </script>
<script type="text/javascript">
//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(latitudine,longitudine), zoom);
function createMarker(point, description)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml(description);});
return marker;
}
map.addOverlay(createMarker(new GLatLng(latitudine,longitudine), Testo_Mappa));
}
}
//]]>
</script>
</head>
|
VARIABILI PHP IN TESTA DA MODIFICARE:
$keyGmap la chiave GMAP che vi è stata data al punto 4
$linkGmap inserite il link copiato da http://maps.google.it al punto 5 *;
$testoGmap = "html che apparira' nel punto in cui la mappa mette il marcatore"; Fate attenzione che questa variabile è contenuta in una stringa javascript quindi eventuali quote e apici vanno escapati ( \' e/o \")
7) INSERIMENTO CODICE - TAG BODY
Modificate il tag BODY in questo modo
| Codice: |
<body onload="load()" onunload="GUnload()">
|
8 ) INSERIMENTO CODICE - LAYER MAPPA
Inserite il layer dove apparira' la mappa (in questo caso con id Map) **.
esempio di codice formattato con css in linea:
| Codice: |
<div id="map" style="width:500px;height:300px;border:1px solid white;"> </div>
|
Praticamente abbiamo trasformato il codice rendendolo portabile in questo modo se dovrete riutilizzare il codice potete mettere tutta la sezione head in un include e modificare solo le 3 variabili iniziali,
<?
$keyGmap = CHIAVE
$linkGmap = LINK
$testoGmap = TESTO_HTML;
?>
*********************************************
*
RECUPERARE MANUALMENTE LE COORDINATE
Se volete inserire manualmente i valori invece di richiamare la funzione
readGmapAddress il link che voi andate a copiare è formato in questa struttura (ho spezzato il link su + righe)
http://maps.google.it/maps?
f=q
&hl=it
&q=Via+Vostra+4+Paese
&sll=43.89522,17.482452
&sspn=13.498625,29.882813
&ie=UTF8
&ll=46.313534,12.517777
&spn=0.002248,0.075597
&z=16
&iwloc=addr
&om=1
Copiate il valore ll,
il primo valore alla sinistra della virgola è la latitudine
il valore alla destra invece è la longitudine
il valore z è lo zoom
nelle variabili:
var latitudine = latitudine ;
var longitudine =longitudine;
var zoom = zoom;
*********************************************
**
MODIFICARE L'ID DELLA MAPPA
Se decidete di cambiare l'id della mappa ricordatevi di modificare anche la riga js
var map = new GMap2(document.getElementById("map"));
L'ultima modifica di kluster il 21 Mag 2007 17:46, modificato 2 volte |
|
| Top |
|
 |
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 21 Mag 2007 17:41 Oggetto: |
|
|
Un comodo include potrebbe essere questo:
| Codice: |
<?
// recupera da: http://api.google.com/signup/"
$key_GMAP = 'CHIAVE';
// recupera da: http://maps.google.it"
$link_GMAP = 'LINK_GMAP';
// xhtml da inserire nel baloon della mappa"
$text_GMAP = 'TESTO MAPPA';
/* riscrivi il body cosi': <body <? print body_GMAP; ?> o se non usi la variabile: <body onload="load()" onunload="GUnload()"> */
$body_GMAP = ' onload="load()" onunload="GUnload()"';
/* id del layer della mappa; ?>*/
$id_layer_GMAP = "map";
/* nel punto della pagina dove vuoi la mappa scrivi <? print layer_GMAP; ?> o se non usi la variabile <div id="map"> </div> */
$layer_GMAP = '<div id="'.$id_layer_GMAP.'" style="width:300px;height:300px"> </div>"';
?>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=<? print key_GMAP; ?>"> </script>
<script type="text/javascript">
//<![CDATA[
function readGmapLink(str)
{
var arrQs,arrLatLong,arr;arrQs=str.split('&');arr= new Array;
for (i=0; i<arrQs.length; i++){
if (arrQs[i].substr(0,3)== "ll="){arrLatLong= (arrQs[i].replace("ll=","")).split(",");latLog= arrQs[i].replace("ll=","");arrLatLong=latLog.split(",");arr['lat'] = arrLatLong[0];arr['long']= arrLatLong[1];}
if (arrQs[i].substr(0,2)== "z=") {arr['zoom'] = parseInt(arrQs[i].replace("z=",""));}
if (arrQs[i].substr(0,2)== "q=") {arr['query'] = arrQs[i].replace("q=","");}
if (arrQs[i].substr(0,3)== "hl="){arr['lingua'] = arrQs[i].replace("hl=","");}}
return (arr);
}
function load()
{
var aGm = new readGmapLink("<? print link_GMAP; ?>");
var latitudine = aGm['lat'];
var longitudine = aGm['long'];
var zoom = aGm['zoom'];
var Testo_Mappa = "<? print text_GMAP; ?>" ;
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("<? print id_layer_GMAP; ?>"));
map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(latitudine,longitudine), zoom);
function createMarker(point, description)
{
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function(){marker.openInfoWindowHtml(description);});return marker;}
map.addOverlay(createMarker(new GLatLng(latitudine,longitudine), Testo_Mappa));
}
}
//]]>
</script>
|
in questo modo una volta modificate le variabili basta includerlo
| Codice: |
[...]
<head>
<? include('inc_gmail.php'); ?>
</head>
<body <? print $body_GMAP; ?>
[...]
<? print $layer_GMAP; ?>
[...]
</body>
</html>
|
p.s se lo riutilizzate più volte nel sito con valori diversi, vi conviene spostare le variabili iniziali $link_GMAP, $text_GMAP, $body_GMAP,$id_layer_GMAP, $layer_GMAP fuori dall'include ed inserirli manualmente in ogni pagina ognuno con il suo valore.
$key_GMAP potete lasciarlo nell'include ma tenete presente che una chiave fornita da google funziona solo per quella directory e non eredita i permessi nelle sotto cartelle, quindi se utilizzate la mappa in diverse subdirectory del vostro sito avrete bisogno di una chiave per ogni percorso radice |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 14 Giu 2007 12:49 Oggetto: |
|
|
piccolo bookmarklet utilissimo per recuperare le coordinate di un oggetto in una mappa.
eccolo:
| Codice: |
javascript:void(prompt('',gApplication.getMap().getCenter()));
|
create un nuovo bookmark (segnalibro) e nell'indirizzo incollateci il codice sopra.
Quando siete in una mappa di http://maps.google.it cliccate per centrare la mappa nel punto interessato.
Lanciate il bookmarklet e apparira' un inputbox dove potete copiare latitudine e longitudine. |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 13 Gen 2008 19:16 Oggetto: |
|
|
ciao sono nuovo del forum, ti faccio i complimenti per la guida.
sto creando un sito e non riesco ad integrare bene la mappa di googlemaps.
questo è un esempio di codice che google mi dice di inserire
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKhSQnSjy4zhSMXSeCj4IdhSsB8fLx08msKpPCbeGsaJ8uj4iPBR6aFPKDlRPq6fkKY5QcIxPgA4F7w"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html> |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 13 Gen 2008 19:17 Oggetto: |
|
|
mia pagina html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="default01l.css" rel="stylesheet" type="text/css" title="default" />
<script type="text/javascript" src="expandOne.js"></script>
</head>
<body>
<div id="struttura">
<div id="header"><br />
PianetaLeo</div>
<div id="nav">
<ul>
<li><a href="index.html">Home Page</a></li>
<li><h3>Foto</h3>
<ul>
<li><a href="foto.html">Foto Album</a></li>
<li><a href="fotoslideshow.html">Foto Slideshow</a></li>
</ul>
</li>
<li><h3>Viaggi</h3>
<ul>
<li><a href="undercostruction.html">Viaggio 1</a></li>
<li><a href="undercostruction.html">Viaggio 2</a></li>
</ul>
</li>
<li><h3>Flickr</h3>
<ul>
<li><a href="http://www.flickr.com/photos/leomeya/sets/72157603433226405/" target="_blank">Flickr Album</a></li>
<li><a href="http://www.flickr.com/photos/leomeya/map/" target="_blank">Flickr Map</a></li>
</ul>
</li>
<li><h3>Tempo Libero</h3>
<ul>
<li><a href="undercostruction.html">I Miei Amici</a></li>
<li><a href="undercostruction.html">Les 2 Alpes</a></li>
</ul>
</li>
<li><h3>Tutto Di Me</h3>
<ul>
<li><a href="undercostruction.html">Chi Sono</a></li>
<li><a href="contattami.html">Contattami</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>Una foto non scattata è un ricordo che non c'è!</h1>
<h1>Il Mio Mondo Di Ricordi </h1>
</div>
<div id="footer"></div>
</div>
</body>
</html> |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 13 Gen 2008 19:17 Oggetto: |
|
|
ho provato a mettere il codece che google mi dice nella mia pagina html
| Codice: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="default01l.css" rel="stylesheet" type="text/css" title="default" />
<script type="text/javascript" src="expandOne.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKhSQnSjy4zhSMXSeCj4IdhSsB8fLx08msKpPCbeGsaJ8uj4iPBR6aFPKDlRPq6fkKY5QcIxPgA4F7w"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="struttura">
<div id="header"><br />
PianetaLeo</div>
<div id="nav">
<ul>
<li><a href="index.html">Home Page</a></li>
<li><h3>Foto</h3>
<ul>
<li><a href="foto.html">Foto Album</a></li>
<li><a href="fotoslideshow.html">Foto Slideshow</a></li>
</ul>
</li>
<li><h3>Viaggi</h3>
<ul>
<li><a href="undercostruction.html">Viaggio 1</a></li>
<li><a href="undercostruction.html">Viaggio 2</a></li>
</ul>
</li>
<li><h3>Flickr</h3>
<ul>
<li><a href="http://www.flickr.com/photos/leomeya/sets/72157603433226405/" target="_blank">Flickr Album</a></li>
<li><a href="http://www.flickr.com/photos/leomeya/map/" target="_blank">Flickr Map</a></li>
</ul>
</li>
<li><h3>Tempo Libero</h3>
<ul>
<li><a href="undercostruction.html">I Miei Amici</a></li>
<li><a href="undercostruction.html">Les 2 Alpes</a></li>
</ul>
</li>
<li><h3>Tutto Di Me</h3>
<ul>
<li><a href="undercostruction.html">Chi Sono</a></li>
<li><a href="contattami.html">Contattami</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>Una foto non scattata è un ricordo che non c'è!</h1>
<h1>Il Mio Mondo Di Ricordi </h1>
<table width=100% height=100%>
<tr>
<td align=center valign=center>
<div id="map" style="width: 500px; height: 300px"></div>
</td>
</tr>
</table>
</div>
<div id="footer"></div>
</div>
</body>
</html> |
|
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 13 Gen 2008 19:18 Oggetto: |
|
|
ecco il link finale http://****/
come vedi non funziona piu' il menu perche'?
scusa se ho diviso in tante risposte ma non volevo fare confusione |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 13 Gen 2008 20:36 Oggetto: |
|
|
io vedo il menu' esteso.
Qui il problema che è js va in conflitto con quell tuo del menu.
Il bello che il debugger non mi da' errori. |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 13 Gen 2008 20:51 Oggetto: |
|
|
esatto il menu rimane esteso mentre nelle altre pagine si chiude e funziona perfettamente ad esempio qui http://****
secondo te da cosa puo' dipendere? |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 13 Gen 2008 21:03 Oggetto: |
|
|
| non lo so prova a spostare il richiamo del expandOne.js dopo quello di gmail |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 13 Gen 2008 21:26 Oggetto: |
|
|
| niente da fare mmmmmmmm che nervoso |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 13 Gen 2008 22:03 Oggetto: |
|
|
c'e' il modo di mettere <body onload="load()" onunload="GUnload()"> dopo tutto il menu
<div id="nav">
.
.
.
.
</div>
credo che forse risolverei il problema |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 14 Gen 2008 02:24 Oggetto: |
|
|
ho capito dove è il problema perche' in expandOne.js script è contenuto questo:
window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable";
BuildList();
}
}
che fa casino con <body onload="load()" onunload="GUnload()">
come posso risolvere? |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 14 Gen 2008 03:20 Oggetto: |
|
|
prova a modificarla dandogli un nome:
| Codice: | function pippo()
{
if(document.getElementsByTagName && document.getElementById)
{
document.getElementById("nav").className="jsenable";
BuildList();
}
}
|
e aggiungendola al body
| Codice: |
<body onload="load();pippo();" onunload="GUnload()">
|
|
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 14 Gen 2008 12:49 Oggetto: |
|
|
| risolto grazie mille |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 14 Gen 2008 12:59 Oggetto: |
|
|
prego, ora che hai risolto ho rimosso i link. Per politica interna si spostano i link a siti personali nel forum "Segnalazioni ed autopromozioni", ma li ho lasciati finchè non risolvevi.
Se vuoi ora puoi postare li nel forum apposito e dare una descrizione al tuo sito.
Ciao  |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 14 Gen 2008 13:59 Oggetto: |
|
|
lo faro' sicuramente non appena lo avro' finito cosi' mi darete qualche consiglio su come migliorarlo
grazie ancora |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 14 Gen 2008 14:10 Oggetto: |
|
|
pensavo di aver risolto.....invece mi sono accorto che con internet exploer funziona tutto e con firefox non funziona niente scusa se riaggiungo il link:http://leomeya.altervista.org/
è concesso battere la testa contro uno spigolo del muro?  |
|
| Top |
|
|
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 14 Gen 2008 15:51 Oggetto: |
|
|
mmm guarda vado al buio.
la procedura di gmap disturba
1) tentativo
<body onload="LoadMap();MenuStart();" onunload="GUnload()">
ossia sposti il richiamo al tuo menustart dopo quello di gmap
poi sposti
expandOne.js dopo il richiamo di LoadMap()
ti dico, potrebbe essere una stronzata, pero' andarsi a debuggare il js di gmap è impossibile |
|
| Top |
|
|
leomeya
Mortale devoto
Registrato: 13/01/08 19:12
Messaggi: 12
|
| Inviato: 14 Gen 2008 16:35 Oggetto: |
 |
|
risolto!!!
in expandOne.js ho cambiato
window.onload=function MenuStart(){
in
function MenuStart(){
e nella pagina di googlemaps ho messo
<body onload="MenuStart();LoadMap()" onunload="GUnload()">
mentre nelle altre
<body onload="MenuStart()">
adesso funziona...........FORSE 
me lo potresti controllare se ti funziona nei tuoi browser IE firefox e Opera perche' quia volte va a volte non va........c'ho 10 secondi a cancellare tutto e ricominciare 
grazie comunque |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
