Cómo agregar Google Maps a tu sitio web

Cómo agregar Google Maps a tu sitio web

Tienes una pagina web genial. ¿No sería genial si pudiera agregar Google Maps a tu sitio web? Hay muchas razones por las cuales. No quiero que sea un artículo largo y aburrido, así que dejaré ese tema. Vamos a hablar sobre cómo agregar Google Maps en tu sitio web.

Para empezar, necesita una cuenta de Google. Espero que tengas una. Si no, entonces crea una cuenta desde AQUÍ. Es necesaria la cuenta de Google, ¿por qué? La razón es que necesitamos una clave API de JavaScript de Google que podemos agregar más adelante a nuestro código HTML. El segundo trabajo sería iniciar sesión en la consola de desarrollador de Google. Enlace AQUÍ.

Paso 1

Primero, necesitas crear un nuevo proyecto. Haz clic en “Seleccionar un proyecto” que se encuentra en la barra superior, junto al logotipo “API de Google”.

Paso 2

Ahora, haz clic en el signo grande (+) que verás en el lado derecho de la ventana emergente.

Paso 3

Es hora de darle un nombre a tu proyecto y presionar “Crear”. Tu proyecto ahora está listo.

Paso 4

Necesitamos una clave API de JavaScript, así que debemos encontrarla en la biblioteca. Lo encontrarás en el lado izquierdo de la pantalla debajo del panel de control.

Paso 5

La “API de JavaScript de Google Maps” debería aparecer en el frente. Pero si no lo hace, entonces puede usar la barra de búsqueda.

Paso 6

Selecciona “Google Maps JavaScript API” y haz click en el boton que dice “Habilitar”.

Paso 7

En la parte de izquierda de tu pantalla debes dar click sobre el menú “Credenciales”, luego click en Crear credenciales.

Paso 8

Deberías obtener la clave, justo después de hacer clic en “Clave de API”. Debe de tener un aspecto como el siguiente.

 

Paso 10

El trabajo difícil ya está hecho. Ahora necesitas agregar la “clave de API” a tu sitio. El código de JavaScript está a continuación:

“YOUR_KEY” debe reemplazarse con la clave API que acabas de obtener.  También se debe ingresar la latitud y longitud del mapa que deseas obtener. Buscar o introducir la latitud y la longitud

Aquí hay un código HTML de muestra para obtener una comprensión clara. Puedes obtener la latitud y longitud fácilmente en Google Maps. Simplemente haz clic derecho en una posición y presione la opción “¿Qué hay aquí?”. La latitud y la longitud se mostrarán separadas por una coma. Toma el código siguiente para guiarte.

Espero que hayas aprendido algo nuevo hoy. Yo digo que deberías intentarlo. Y déjeme saber si te gusta o si tienes algún inconveniente hazme saber a través de la sección de comentarios.