Centro de ayuda

Cómo añadir Google Maps

Mira este tutorial sobre cómo añadir Google Maps, o lee la guía a continuación.

Google ha cambiado las normas de uso de Google Maps. Para añadir un mapa de Google a su sitio web, ahora necesita obtener una clave para la API de JavaScript, especificarla en la configuración del bloque de mapas y vincular una tarjeta de banda a su cuenta de Google.

Vaya a la página:
https://console.cloud.google.com/google/maps-apis/overview.
Cree un nuevo proyecto o seleccione uno existente. Haga clic en Crear.

Google Cloud Platform, the "New Project" page: the "Project name *" field and the "CREATE" button.

Seleccione Maps JavaScript API.

Google Cloud Platform: the "Maps JavaScript API" card in the "Maps APIs and Services" section.

Active el servicio haciendo clic en Activar.

In Google Cloud Platform, the "ENABLE" button on the "Maps JavaScript API" page in the API Library.

Vaya a la pestaña "Credenciales" y haga clic en Credenciales en API y servicios.

In Google Cloud Platform, the "Credentials in APIs & Services" link at the top of the "Credentials" section.

A continuación, haga clic en Crear credenciales y seleccione Clave API en la lista desplegable.

In Google Cloud Platform under "Credentials": the "API key" option in the "+ CREATE CREDENTIALS" drop-down menu.

Haga clic en Restringir clave en una ventana emergente.

In the Google Cloud Platform console, the "RESTRICT KEY" button in the "API key created" pop-up window.

Seleccione lacasilla "Remitentes HTTP (sitios web)" , escriba el nombre de su dominio en la casilla de remitentes para autorizar el mapa y, a continuación, seleccione la opción "Restringir clave" y marque la casilla "Restringir clave".

In Google Cloud Platform under "Restrict and rename API key": select "HTTP referrers (web sites)", add domain URLs in "Website restrictions", and select "Restrict key" under "API restrictions".

Trucos y consejos: la entrada https://tilda.cc/* es opcional. Habilita una vista previa del mapa en Tilda Editor. De lo contrario, sólo se podrá acceder a un mapa a través de un enlace de dominio.

Una vez que haya terminado de editar su sitio web, elimine la segunda entrada por motivos de seguridad. Más información sobre cómo proteger una clave API.

En la lista desplegable, seleccione Maps JavaScript API y guarde los cambios.

Google Cloud Platform: The "Maps JavaScript API" checkbox in the dropdown list and the "SAVE" button at the bottom.

Nota: Google Maps ha cambiado recientemente su política, por lo que ahora tienes que habilitar la facturación en tu cuenta antes de obtener una clave. Más información sobre los precios de Google Maps.

Vaya a la pestaña "Facturación" para vincular una tarjeta bancaria a su cuenta.

In the Google Cloud Platform console, the "Billing" item in the navigation menu on the left.

Una vez que haya terminado, vaya a Credenciales y copie la clave.

Google Cloud Platform "Credentials" page: copy icon next to the key value under "API Keys".

Vaya a su proyecto en Tilda, añada un bloque con un mapa de la categoría "Otros" a la página (por ejemplo, Т143), abra el panel Contenido del bloque y pegue la clave en el campo "Clave API de mapa". Guarde los cambios y publique la página.

Block Content panel: Google Maps configuration fields including "ONLINE MAP SERVICE", "MAP API KEY", and geo point settings.

Solución de problemas

P: He introducido la clave API en el bloque del mapa, pero el mapa sólo aparece en la versión publicada de la página. En el editor aparece el error "¡Uy! Algo ha ido mal". ¿Cómo puedo solucionarlo?

Page editor: the "Content" button on the panel of the T143 block with a Google Maps loading error.

R: Este error suele producirse después de restringir la clave API. Para evitar que un tercero utilice tu clave de API en su sitio web, te recomendamos que solo proporciones acceso a tu nombre de dominio. Obtén más información sobre cómo proteger una clave de API.

Para habilitar una vista previa del mapa en Tilda Editor temporalmente, autoriza https://tilda.cc/* en Google Maps Platform y revoca el acceso más tarde.