Qué saber
- Ve a la Consola de Google Cloud Platform y cree o seleccione un proyecto, luego haga clic en Continuar. Sobre el Cartas credenciales página, obtén una Clave API.
- Inserte el código JavaScript (que se muestra a continuación) en la sección BODY del documento HTML.
- En el encabezado del documento HTML, especifique las restricciones CSS para el mapa, incluido el tamaño, los colores y la ubicación de la página.
Este artículo explica cómo insertar un mapa de Google con un marcador de ubicación en su página web. Este proceso incluye obtener una clave de software especial de Google y luego agregar el JavaScript relevante a la página.
Obtenga una clave de API de Google Maps
Para proteger sus servidores de ser bombardeados por solicitudes de mapas y búsquedas de ubicación, Google acelera el acceso a su base de datos de Mapas. Debe registrarse en Google como desarrollador para obtener una clave única para usar la Interfaz de programación de aplicaciones para solicitar datos de los servidores de Maps. La clave API es gratuita a menos que necesite un acceso intensivo a los servidores de Google (por ejemplo, para desarrollar una aplicación web).
Para registrar su clave API:
Ve a la Consola de Google Cloud Platform y, después de iniciar sesión con su cuenta de Google, cree un nuevo proyecto o seleccione uno existente.
Hacer clic Continuar para habilitar la API y cualquier servicio relacionado.
Sobre el Cartas credenciales página, obtén una Clave API. Según sea necesario, establezca restricciones relevantes en la clave.
Asegure su clave API usando mejores prácticas recomendado por Google.
Si cree que necesitará que el mapa se muestre con más frecuencia de la que permite su cuota gratuita, establezca un acuerdo de facturación con Google. Es poco probable que la mayoría de los sitios web, especialmente los blogs de poco tráfico o los sitios especializados, consuman gran parte de la asignación de cuotas.
Inserte el JavaScript en su página web
Inserte el siguiente código en su página web, en la sección BODY del documento HTML:
// Inicialice y agregue la función de mapa initMap () {
// La ubicación de la bandera var flag = {lat: XXX, lng: YYY};
// El mapa, centrado en la bandera var map = new google.maps. Map (document.getElementById ('mapa'), {zoom: 4, centro: bandera});
// El marcador, ubicado en la bandera var marker = new google.maps. Marcador ({posición: bandera, mapa: mapa}); } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
En este código, cambie lo siguiente:
- Reemplazar bandera con un nombre que haga referencia a la ubicación que estás fijando. Hágalo simple y breve (como casa o oficina o París o Detroit). Puedes ejecutar este código dejando bandera tal cual, pero cambiar el nombre permite la reutilización de este código en la misma página, para incrustar varios mapas diferentes.
- Reemplazar XXX y YYY con la latitud y longitud, en decimales, de la ubicación del marcador del mapa. Debe reemplazar estos valores para que el mapa se muestre correctamente. Una forma fácil de encontrar la latitud y la longitud es abrir Google Maps y hacer clic con el botón derecho en la ubicación precisa que desea marcar. En el menú contextual, seleccione ¿Que hay aquí? para ver la latitud y la longitud.
- Reemplazar YOUR_API_KEY con la clave API que obtuvo de Google. No ponga espacios entre el signo igual y el ampersand. Sin la clave, la consulta fallará y el mapa no se mostrará correctamente.
Prácticas óptimas
En el encabezado de su documento HTML, especifique las restricciones de CSS para el mapa, incluido el tamaño, los colores y la ubicación de la página.
La secuencia de comandos del mapa de Google contiene atributos como zoom y centrar que están abiertos a modificaciones por parte del usuario final. Esta técnica más avanzada está respaldada por la documentación para desarrolladores de Google.
Una API de Google Maps es un activo valioso. Las instrucciones de prácticas recomendadas de Google ofrecen excelentes consejos para proteger la clave contra el uso indebido por parte de otros. La seguridad adecuada es especialmente relevante si ha configurado un sistema de pago para el acceso a la API, ya que podría enfrentar una factura elevada si le roban sus credenciales. En particular, el ejemplo que mostramos aquí lo hace incrustar la clave API directamente en el código; lo hemos hecho con el propósito de demostrar el procedimiento. En un entorno de producción, sin embargo, es mejor especificar variables de entorno para la clave en lugar de insertar la clave directamente.