5 utentionline
Yappybook
searchengine
quicklinks
WebDesigner
Web Marketing
Web Development
Template & Layout
Non solo Web :: Blog
Portfolio Lavori
Who is Yappy?
Benvenuto nella Newsletter
libririviste
Newsletter
Calendario motoGP 2007
newscorsi
FAQ & Domande
newscorsi
Web Designer gratuitoCorso Web Designer Gratuito per creare siti internet trucchi, consigli, esempi pratici e template per diventare un vero web designer.
Seo Extreme 2007
Al corso nazionale "Seo Extreme 2007" troverai le ultime tecniche e strategie di Posizionamento nei motori di ricerca. Parteciperai ad un corso di alto livello dedicato a chi vuole fare posizionamento...
Newsletter
Obiettivi e risultatiCiao,
ho atteso un po' a mandarti una nuova newsletter ma volevo essere sicuro di aver qualcosa da dire e qualcosa da offrire.
News n.13 - 27 febbraio 2007
In questa edizione ci sono nuovi tutorial e domande a cui ora è facilissimo trovare risposta come mettere il bottone Skype oppure una Google Map sul tuo sito internet.
Inoltre novità e corsi per diventare professionisti del web...
libririviste
Web Design Facile"Web Design Facile" di Davide Vasta è una guida pratica che conduce il lettore, passo per passo attraverso la realizzazione di un sito Internet: dalla creazione di un prototipo da mostrare al cliente fino al suo sviluppo definitivo.
WebDesigner 22
Web Designer Magazine n.22. Flash in prima linea, conoscere l'ultima versione del programma Macromedia. Inserire video Flash nelle vostre pagine. In primo piano "diventare Designer di successo".
tagclouds
Web Marketing Watch FTP Client for MacOS Magia della scrittura Yes Man - Danny Wallace Realizzare Form mail in Flash Un Forum in ASP [Fase II] Trucchi headlines efficaci 5 Real Code Day Web Design for Ecommerce Battaglia Navale Paginazione in JS Trucchi headlines efficaci 8 Birbacco website Tutorials Flash Mxsyndicate
RSS 2.0Atom feed
CreativeCommons
stampa l'articolo
segnala ad un amicoCoordinate Google Maps
[07 Dic 2006]Come faccio ad inserire una Google Maps all'interno di un sito?
Niente di più semplice, basta seguire le indicazioni di questo semplice tutorial.
Inserire una mappa interattiva in un sito internet è diventato semplice grazie alle Google Map. Vediamo passo passo le operazioni necessarie ad impostarne una:
- Richiedere una API key;
- Salvare il codice della pagina con la mappa;
- Impostare le caratteristiche della mappa;
Richiedere una API key
Si tratta di un codice identificativo che google associa al sito nel quale vuoi inserire la mappa.
- Vai nella pagina http://www.google.com/apis/maps/signup.html;
- Accetta le condizioni d'uso del servizio;
- Inserisci l'indirizzo del tuo sito http://www.tuosito.it
- Premi il pulsante "Generate Api Key"
- Usa il tuo nome utente e password Gmail per accedere al pannello;
All'interno trovi sia la tua API Key sia una pagina di esempio.
Il codice di esempio della pagina
<!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=*********"
type="text/javascript"></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(43.7892, 11.2285), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Caratteristiche della pagina
map.addControl(new GSmallMapControl());
inserisce i pulsanti di navigazione sulla sinistra in versione small
map.addControl(new GLargeMapControl());
inserisce i pulsanti di navigazione sulla sinistra in versione large
map.addControl(new GMapTypeControl());
inserisce i pulsanti per cambiare la modalità di visualizazione (mappa, satellite ed ibrida), in alto a destra della mappa.
map.setCenter(new GLatLng(43.7892, 11.2285), 13);
La prima è la latitudine in gradi esadecimali, la seconda è la longitudine sempre in gradi esadecimali.
Il valore 13 è l'ingrandimento della mappa, più il valore basso maggiore è la distanza, uno zoom più elevato rende vicino l'obiettivo.
Importante: Per ogni sito in cui vuoi inserire una mappa devi generare una API Key.
Innvece se nello stesso sito vuoi pubblicare più mappe, l'API key è la stessa.
Per trovare le coordinate per la tua Google Map il sito http://www.earthtools.org fa per te.
Visita il sito »