Como engadir un mapa de Google á súa páxina web

01 de 05

Obter unha clave de API de Google Maps para o seu sitio

A mellor forma de engadir un mapa de Google ao teu sitio web é usar a API de Google Maps. E Google recomenda que reciba unha clave API para usar os mapas.

Non é necesario obter unha clave API para usar o API v3 de Google Maps, pero é moi útil, xa que permite monitorizar o seu uso e pagar o acceso adicional. Google Maps API v3 ten unha cota de 1 solicitude por segundo por usuario a un máximo de 25.000 solicitudes por día. Se as súas páxinas exceden eses límites, necesitará habilitar a facturación para obter máis.

Como obter unha clave API de Google Maps

1. Inicia sesión en Google usando a túa conta de Google.
2. Vaia á Consola de programadores
3. Desprácese ata a lista e busque a API de Google Maps v3 e, a continuación, faga clic no botón "OFF" para activalo.
4. Lea e acepta os termos.
5. Vaia á consola de API e seleccione "Acceso á API" no menú da esquerda
6. Na sección "Acceso simple á API", faga clic no botón "Crear nova chave de servidor ...".
7. Introduce o enderezo IP do teu servidor web. Esta é a IP onde virán as solicitudes de Maps. Se non coñeces o teu enderezo IP, podes buscalo.
8. Copia o texto na liña "API key:" (non incluíndo ese título). Esta é a túa chave API para os teus mapas.

02 de 05

Converte a súa dirección en coordenadas

Para utilizar Google Maps nas túas páxinas web, necesitas ter a latitude e a lonxitude da localización. Podes obter estes desde un GPS ou podes usar unha ferramenta en liña como Geocoder.us para dicirlle.

1. Vaia a Geocoder.us e escribe o teu enderezo na caixa de busca.
2. Copia o primeiro número da latitude (sen unha letra na parte frontal) e pégalo nun ficheiro de texto. Non necesita o indicador de grao (º).
3. Copia o primeiro número da lonxitude (outra vez sen unha letra na parte frontal) e pégalo no teu ficheiro de texto.

A súa latitude e lonxitude veranse así:

40.756076
-73.990838

Geocoder.us só funciona para enderezos de EE. UU., Se necesitas obter as coordenadas noutro país, debes buscar unha ferramenta similar na túa rexión.

03 de 05

Engadindo o mapa á súa páxina web

En primeiro lugar, engada o script do mapa ao

do teu documento

Abra a páxina web e engada o seguinte ao HEAD do documento.

Cambia a parte resaltada aos números de latitude e lonxitude que escribiches no paso dous.

En segundo lugar, engada o elemento do mapa á súa páxina

Unha vez que engada todos os elementos de script ao HEAD do documento, ten que colocar o mapa na páxina. Faino engadindo un elemento DIV co atributo id = "map-canvas". Recoméndovos que tamén este div con o ancho e a altura que caben na túa páxina:

Finalmente, Cargar e probar

O último que debes facer é cargar a túa páxina e probar que o teu mapa móstrase. Aquí tes un exemplo dun mapa de Google na páxina. Teña en conta que, debido á forma en que funciona o CMS de About.com, terá que facer clic nunha ligazón para que apareza o mapa. Este non será o caso da túa páxina.

Se o mapa non aparece, tente inicializalo cun atributo BODY:

onload = "inicializar ()" >

Outras cousas para comprobar se o teu mapa non está cargando inclúen:

• Busque erros no seu JavaScript, incluído o caso. O JavaScript é case sensíbel.
• Asegúrese de que ten as opcións de zoom e centro definidas.
• Asegúrese de que o elemento DIV está na páxina coa ID correcta.
• Asegúrese de que o seu elemento DIV ten unha altura.

04 de 05

Engade un marcador ao teu mapa

Pero que bo é un mapa da túa situación se non hai ningún marcador que diga ás persoas onde deben ir?

Para engadir un marcador vermello de Google Maps engada o seguinte ao seu script debaixo do mapa var = ... liña:

var myLatlng = new google.maps.LatLng ( latitude, longitude );
var marcador = novo google.maps.Marker ({
posición: myLatlng,
mapa: mapa,
título: " Sede antiga de About.com "
});

Cambia o texto resaltado á túa latitude e lonxitude e ao título que queres que apareza cando as persoas pasen o rato sobre o marcador.

Pode engadir tantos marcadores á páxina que desexe, só engada novas variables con novas coordenadas e títulos, pero se o mapa é demasiado pequeno para mostrar todos os marcadores, non se mostrarán a non ser que o lector afai.

var latlng 2 = new google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = novo google.maps.Marker ({
posición: latlng 2 ,
mapa: mapa,
título: " Apple Computer "
});

Aquí tes un exemplo dun mapa de Google cun marcador. Teña en conta que, debido á forma en que funciona o About.com CMS, ten que facer clic nunha ligazón para que apareza o mapa. Este non será o caso da túa páxina.

05 de 05

Engada un segundo (ou máis) mapa á súa páxina

Se mirou a miña páxina de exemplo, Google Maps verá que teño máis dun mapa que se mostra na páxina. Isto é moi fácil de facer. Velaquí.

1. Obteña a latitude e lonxitude de todos os mapas que desexa mostrar como aprendemos no paso 2 deste tutorial.
2. Insira o primeiro mapa como aprendemos no paso 3 deste tutorial. Se desexa que o mapa teña un marcador, engada o marcador como no paso 4.
3. Para o segundo mapa, terá que engadir 3 novas liñas ao seu script inicializar ():
   var latlng2 = new google.maps.LatLng ( segundo coordenadas );
   var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
   var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
4. Se queres un marcador no novo mapa tamén, engade un segundo marcador que apunta ás segundas coordenadas e ao segundo mapa:
   var myMarker2 = new google.maps.Marker ({position: latlng2 , map: map2 , title: " Your Marker Title "});
5. A continuación, engade o segundo

   onde desexa o segundo mapa. E asegúrese de darlle unha ID = "map_canvas_2" ID.

6. Cando a páxina carga, mostraranse dous mapas

Aquí está o código dunha páxina con dous mapas de Google nel: