01 de 05
Obteniu una clau d'API de Google Maps per al vostre lloc
La millor manera d'afegir un mapa de Google al vostre lloc web és utilitzar l'API de Google Maps. I Google recomana que obtingueu una clau d'API per poder utilitzar els mapes.
No cal que obtingueu una clau API per utilitzar l'API v3 de Google Maps, però és molt útil, ja que us permet controlar el vostre ús i pagar un accés addicional. Google Maps API v3 té una quota d'1 sol·licitud per segon per usuari a un màxim de 25.000 sol·licituds per dia. Si les vostres pàgines superen aquests límits, haureu d'habilitar la facturació per obtenir més.
Com obtenir una clau API de Google Maps
- Inicieu sessió a Google mitjançant el vostre compte de Google.
- Aneu a la Consola de desenvolupadors
- Desplaceu-vos per la llista i busqueu l'API de Google Maps v3, feu clic al botó "Desactivat" per activar-lo.
- Llegir i acceptar els termes.
- Aneu a la consola d'API i seleccioneu "Accés a l'API" al menú de l'esquerra
- A la secció "Accés simple a l'API", feu clic al botó "Crea un nou servidor clau ...".
- Introduïu l'adreça IP del vostre servidor web. Aquesta és la IP on procedeixen les sol·licituds de Google Maps. Si no coneixeu la vostra adreça IP, podeu consultar-la.
- Copieu el text a la línia "API key:" (sense incloure aquest títol). Aquesta és la vostra clau d'API per als vostres mapes.
02 de 05
Convertiu la vostra adreça a les coordenades
Per utilitzar Google Maps a les vostres pàgines web, heu de tenir la latitud i la longitud de la ubicació. Podeu obtenir-los des d'un GPS o podeu utilitzar una eina en línia com Geocoder.us per indicar-vos.
- Aneu a Geocoder.us i escriviu la vostra adreça al quadre de cerca.
- Copieu el primer número de la latitud (sense una lletra al capdavant) i enganxeu-lo en un fitxer de text. No necessiteu l'indicador de grau (º).
- Copieu el primer número de la longitud (de nou sense una lletra al capdavant) i enganxeu-lo al vostre fitxer de text.
La vostra latitud i longitud es veurà així:
40.756076
-73.990838
Geocoder.us només funciona per adreces dels EUA, si necessiteu obtenir les coordenades d'un altre país, heu de buscar una eina similar a la vostra regió.
03 de 05
Afegint el mapa a la vostra pàgina web
Primer, afegiu el script del mapa al fitxer
del vostre document
Obriu la vostra pàgina web i afegiu el següent al HEAD del document.
Canvieu la part ressaltada als nombres de latitud i longitud que va escriure al pas dos.
En segon lloc, afegiu l'element de mapa a la vostra pàgina
Un cop hàgiu afegit tots els elements de seqüència al HEAD del vostre document, heu de col·locar el vostre mapa a la pàgina. Podeu fer-ho afegint un element DIV amb l'id = "map-canvas". Us recomano que també feu d'estil aquest div amb l'amplada i l'alçada que s'ajusti a la vostra pàgina:
Finalment, Penja i prova
L'últim que heu de fer és carregar la pàgina i provar que el mapa es mostri. Aquest és un exemple d'un mapa de Google a la pàgina. Tingueu en compte que, a causa de la manera com funciona el CMS de About.com, haureu de fer clic a un enllaç perquè el mapa aparegui. Aquest no serà el cas de la vostra pàgina.
Si el vostre mapa no apareix, prova d'inicialitzar-lo amb un atribut BODY:
onload = "initialize ()" >
Altres coses per comprovar si el vostre mapa no s'està carregant inclou:
- Busqueu errors tipogràfics al vostre JavaScript, inclòs el cas. JavaScript té majúscules i minúscules.
- Assegureu-vos que teniu opcions de zoom i de centre.
- Assegureu-vos que el vostre element DIV es troba a la pàgina amb l'ID correcta.
- Assegureu-vos que el vostre element DIV tingui una alçada.
04 de 05
Afegiu un marcador al vostre mapa
Però, què bo és un mapa de la vostra ubicació si no hi ha marcador que indiqui a les persones on haurien d'anar?
Per afegir un marcador vermell estàndard de Google, afegiu el següent al vostre script sota el mapa de var = ... line:
var myLatlng = nova google.maps.LatLng ( latitud, longitud );
var marcador = nou google.maps.Marker ({
posició: myLatlng,
mapa: mapa,
títol: " antiga caserna general de www.ed.es "
});
Canvieu el text ressaltat a la vostra latitud i longitud i el títol que voleu que aparegui quan els usuaris passin el cursor per sobre del marcador.
Podeu afegir tants marcadors a la pàgina que vulgueu, només cal afegir noves variables amb noves coordenades i títols, però si el mapa és massa petit per mostrar tots els marcadors, no es mostraran a menys que el lector s'apagui.
var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = new google.maps.Marker ({
posició: latlng 2 ,
mapa: mapa,
títol: " Apple Computer "
});
Aquí teniu un exemple d'un mapa de Google amb un marcador. Tingueu en compte que, a causa de la manera com funciona el CMS de About.com, heu de fer clic a un enllaç perquè el mapa aparegui. Aquest no serà el cas de la vostra pàgina.
05 de 05
Afegiu un segon (o més) mapa a la vostra pàgina
Si heu consultat el meu exemple de la pàgina de Google Maps, notareu que tinc més d'un mapa que es mostra a la pàgina. Això és molt fàcil de fer. Així és com.
- Obteniu la latitud i la longitud de tots els mapes que vulgueu visualitzar tal com hem après al pas 2 d'aquest tutorial.
- Introduïu el primer mapa tal com hem après al pas 3 d'aquest tutorial. Si voleu que el mapa tingui un marcador, afegiu el marcador al pas 4.
- Per al segon mapa, haureu d'afegir 3 línies noves al vostre script initialize ():
var latlng2 = noves google.maps.LatLng ( segones coordenades );
var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Si voleu un marcador al nou mapa, afegiu un segon marcador que apunti a les segones coordenades i al segon mapa:
var myMarker2 = new google.maps.Marker ((position: latlng2 , map: map2 , title: " Your Marker Title "}); - A continuació, afegiu el segon
on voleu el segon mapa. I assegureu-vos de donar-li un ID = "map_canvas_2" ID.
- Quan es carregui la pàgina, es mostraran dos mapes
Aquí teniu el codi d'una pàgina amb dos mapes de Google: