Obtenga una clave API de Google Maps para su sitio
La mejor manera de agregar un mapa de Google a su sitio web es usar la API de Google Maps. Y Google recomienda que obtengas una clave API para usar los mapas.
No es necesario que obtenga una clave de API para usar Google Maps API v3, pero es muy útil ya que le permite controlar su uso y pagar por el acceso adicional. Google Maps API v3 tiene una cuota de 1 solicitud por segundo por usuario hasta un máximo de 25,000 solicitudes por día. Si sus páginas exceden esos límites, deberá habilitar la facturación para obtener más.
Cómo obtener una clave API de Google Maps
- Inicie sesión en Google utilizando su cuenta de Google.
- Ir a la consola de desarrolladores
- Desplácese por la lista y busque la API de Google Maps v3, luego haga clic en el botón "OFF" (Desactivar) para activarla.
- Lea y acepte los términos.
- Vaya a la consola de API y seleccione "Acceso a API" en el menú de la izquierda
- En la sección "Acceso a API simple", haga clic en el botón "Crear nueva clave de servidor …".
- Introduzca la dirección IP de su servidor web. Esta es la IP de donde vendrán sus solicitudes de Mapas. Si no conoce su dirección IP, puede buscarla.
- Copie el texto en la línea "Clave de API:" (sin incluir ese título). Esta es tu clave API para tus mapas.
Convierte tu dirección en coordenadas
Para poder utilizar Google Maps en sus páginas web, debe tener la latitud y la longitud de la ubicación. Puede obtenerlos desde un GPS o puede usar una herramienta en línea como Geocoder.us para informarle.
- Vaya a Geocoder.us y escriba su dirección en el cuadro de búsqueda.
- Copie el primer número para la latitud (sin una letra al frente) y péguelo en un archivo de texto. No es necesario el indicador de grado (º).
- Copie el primer número para la longitud (nuevamente sin una letra al frente) y péguelo en su archivo de texto.
Tu latitud y longitud se verán así:
40.756076-73.990838
Geocoder.us solo funciona para direcciones de EE. UU., Si necesita obtener las coordenadas en otro país, debe buscar una herramienta similar en su región.
03 de 05Agregar el mapa a su página web
Primero, agregue el script de mapa a la
de su documento
Abra su página web y agregue lo siguiente a la CABEZA de su documento.
Cambie la parte resaltada a los números de latitud y longitud que anotó en el paso dos.
En segundo lugar, agregue el elemento del mapa a su página
Una vez que haya agregado todos los elementos del script al CABEZA de su documento, necesita posicionar su mapa en la página. Usted hace esto agregando un Div elemento con el id = "mapa-lienzo" atributo. Te recomiendo que también diseñes este div con el ancho y la altura que se ajusten a tu página:
Finalmente, subir y probar.
Lo último que debe hacer es cargar su página y probar que se muestra su mapa. Aquí hay un ejemplo de un mapa de Google en la página. Tenga en cuenta que, debido a la forma en que funciona el CMS de About.com, tendrá que hacer clic en un enlace para que aparezca el mapa. Este no será el caso en tu página.
Si su mapa no aparece, intente inicializarlo con un CUERPO atributo:
onload = "inicializar ()" >
Otras cosas para verificar si su mapa no se está cargando incluyen:
- Busque errores tipográficos en su JavaScript, incluido el caso. JavaScript distingue entre mayúsculas y minúsculas.
- Asegúrese de que tiene la
enfocarycentrarconjunto de opciones. - Asegúrese de que su
DivEl elemento está en la página con el ID correcto. - Asegúrese de que su
DivEl elemento tiene una altura.
Añadir un marcador a su mapa
Pero, ¿de qué sirve un mapa de su ubicación si no hay un marcador que indique a las personas a dónde deben ir?
Para agregar un marcador rojo estándar de Google Maps, agregue lo siguiente a su secuencia de comandos debajo de var mapa = … línea:
var myLatlng = new google.maps.LatLng ( latitud longitud );marcador var = nuevo google.maps.Marker ({posición: myLatlng,mapa: mapa,título:" Antigua sede de About.com '});
Cambie el texto resaltado a su latitud y longitud y el título que desea que aparezca cuando las personas se ciernen sobre el marcador.
Puede agregar tantos marcadores a la página como desee, solo agregue nuevas variables con nuevas coordenadas y títulos, pero si el mapa es demasiado pequeño para mostrar todos los marcadores, no se mostrarán a menos que el lector se aleje.
var latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker ({posición: latlng 2 ,mapa: mapa,título:" computadora Apple '});
Aquí hay un ejemplo de un mapa de Google con un marcador. Tenga en cuenta que, debido a la forma en que funciona el CMS de About.com, debe hacer clic en un enlace para que aparezca el mapa. Este no será el caso en tu página.
05 de 05Agrega un segundo (o más) mapa a tu página
Si ha mirado mi ejemplo, la página de Google Maps se dará cuenta de que tengo más de un mapa en la página. Esto es muy fácil de hacer. Así es cómo.
- Obtenga la latitud y la longitud de todos los mapas que desea mostrar, tal como lo aprendimos en el paso 2 de este tutorial.
- Inserte el primer mapa como aprendimos en el paso 3 de este tutorial. Si desea que el mapa tenga un marcador, agregue el marcador como en el paso 4.
- Para el segundo mapa, deberá agregar 3 nuevas líneas a su script initialize ():
var latlng2 = new google.maps.LatLng ( segundas coordenadas );var myOptions2 = {zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Si también desea un marcador en el nuevo mapa, agregue un segundo marcador que señale las segundas coordenadas y el segundo mapa:
var myMarker2 = new google.maps.Marker ({position: latlng2 , mapa: mapa2 , título: " Su título de marcador ' }); - Luego agrega el segundo lugar donde quieras el segundo mapa. Y asegúrese de darle una
id = "map_canvas_2"CARNÉ DE IDENTIDAD. - Cuando se carga tu página, se mostrarán dos mapas
Aquí está el código de una página con dos mapas de Google:
