Clave de API de Googlemaps para Localhost


91

¿Cómo hago para que la clave api de googlemaps funcione en localhost?

Creé una clave de API y en los referentes agrego lo siguiente:

Accept requests from these HTTP referrers (websites) (Optional)

Use asterisks for wildcards. If you leave this blank, requests will be 
accepted from any referrer. Be sure to add referrers before using this key 
in production. 

localhost

Esto no funciona y si excluyo la clave de la API, tampoco funciona.


Respuestas:


130
  1. Vaya a esta dirección: https://console.developers.google.com/apis
  2. Crea una clave API para tu proyecto
  3. Haga clic en "Biblioteca"
  4. Haga clic en cualquier API que desee
  5. Haga clic en "Habilitar" (arriba a la derecha)
  6. Haga clic en "Credenciales"> "Editar clave"
  7. En "Restricción de claves", seleccione "URL de referencia HTTP (sitios web)".
  8. Escriba la dirección de su sitio web (o "localhost", "127.0.0.1", "localhost: puerto", etc. para pruebas locales) en el campo de texto y presione ENTERpara agregarlo a la lista
  9. Usa tu clave en tu proyecto

8
Esto es lo que hice también, pero me pregunto: ¿significa esto que CUALQUIERA que trabaje localmente (localhost / 127.0.0.1) podría usar mi CLAVE API (y posiblemente inferir costos para mí después de que se aplique el nuevo precio en 2018-06-11)? ?)
tmanolatos

31
@tmanolatos Sí, eso es lo que significa. No es una buena práctica otorgar derechos de host local a la clave de producción, ya que cualquiera puede usar su clave mientras se ejecuta localmente. En su lugar, debe mantener dos claves. Uno para producción que puede ser visto por cualquier persona y, por lo tanto, solo debe permitirse en su dominio. Uno para desarrollo que debe tratarse como credenciales (no lo comparta) y permite el acceso desde localhost.
the_cheff

2
@tmanolatos Sí, pero debe compilar dos claves, una para probar la aplicación y otra para la aplicación principal
mirzaei.sajad

Recibo esta respuesta después de seguir los pasos anteriores: {"error_message": "Las claves de API con restricciones de referencia no se pueden usar con esta API", "resultados": [], "estado": "REQUEST_DENIED"} Aquí está la URL , donde DEV_KEY se sustituye con mi clave de API: maps.googleapis.com/maps/api/geocode/…
rmutalik

Devuelve JSON correcto cuando uso mi clave api PROD_KEY.
rmutalik

10

Puedes seguir de esta manera. Funciona al menos para mí:

en la página de credenciales:

  1. Seleccione la opción con dirección IP (opción nº 3).

  2. Ponga su dirección IP de su proveedor. Si no lo hace, busque su dirección IP utilizando este enlace: https://www.google.com/search?q=my+ip

  3. Guárdalo.

  4. Cambie el enlace de su mapa de Google de la siguiente manera entre la etiqueta scrip:

    https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzxxxxxxxx "

  5. Espere unos 5 minutos o más para que su clave de API se propague.

Ahora tu mapa de Google debería funcionar.


9

Si está trabajando en localhost, cree una APIkey separada para su desarrollo y luego elimine las restricciones en esa clave para que su localhost pueda usarla. Recuerde no utilizar esta clave en producción, para no exponer su clave a cazadores en línea.

Tuve el mismo problema y todos los intentos de hacer que las restricciones funcionen en mi entorno de host local no tuvieron éxito hasta que creé un apikey separado específicamente para el desarrollo y luego eliminé sus restricciones. Sin embargo, no uso esa clave en el entorno de producción, y una vez que haya terminado con los desarrollos, eliminaré la clave API de inmediato.

Sé que esta publicación llega tarde, pero para las personas que probablemente enfrentarán este problema en el futuro, esta es la mejor ruta a seguir.


5

Supongo que llego un poco tarde a la fiesta, y aunque estoy de acuerdo en que al crear una clave separada para el desarrollo (localhost) y el producto, es posible hacer ambas cosas en una sola clave.

Cuando usa Restricciones de la aplicación -> Referentes http -> Restricciones del sitio web, puede ingresar URL con comodines.

Sin embargo, usando un comodín como .localhost / o .localhost: {puerto}. (al tener ya .yourwebsite.com / * ) no parece funcionar.

Simplemente poner un solo * funciona, pero esto básicamente te da una clave ilimitada que tampoco es lo que quieres.

Cuando incluye la ruta completa sin usar el comodín * también funciona, así que en mi caso poner:

http: // localhost {puerto} /
http: // localhost : {puerto} / algo más / aquí

Hace que los mapas de Google funcionen tanto de forma local como en www.yourwebsite.com utilizando la misma clave API.

De todos modos, cuando tener 2 teclas separadas también es una opción, recomendaría hacerlo.


1

Puede seguir este tutorial sobre cómo utilizar Google Maps para realizar pruebas en localhost.

Verifique estos hilos SO relacionados:

¡Espero que esto ayude!


2
enlace roto está roto
Rafael Herscovici


@AEGrey: no para mí, para futuros usuarios.
Rafael Herscovici

1

Debe verificar el error específico dentro de la consola de JavaScript (por ejemplo, Ctrl+ Shift+ Ken Firefox para Windows).

Según Steven Gliebe (2016) , existen cuatro casos comunes de este problema. Si puedo resumirlo, así:

  1. MissingKeyMapError >> Obtenga la clave API de Google Maps (pero también considere la alternativa n. ° 2)
  2. RefererNotAllowedMapError >> Registre su localhost: puerto en su panel de desarrollador de Google .
  3. ApiNotActivatedMapError >> Habilitación de la API de Google Maps en la página de la biblioteca de API de Google
  4. InvalidKeyMapError >> Agregue su clave a sus scripts / códigos correctamente

Después de realizar algunas modificaciones en el código, borre la memoria caché de su navegador según sea necesario.

En caso de que haya otros errores, puede consultar la página de documentación de los códigos de error de la API de Google Maps .


0

Donde dice "Aceptar solicitudes de estas referencias HTTP (sitios web) (opcional)", no es necesario que aparezca ninguna referencia. Así que haga clic en la X junto a localhost en esta página, pero continúe usando su clave.

Entonces debería funcionar después de unos minutos.

Los cambios realizados a veces pueden tardar unos minutos en surtir efecto, así que espere unos minutos antes de volver a probar.


0

Al escribir 'mi IP' en la búsqueda de Google, obtuve mi dirección IP pública y la pegué en la dirección IP (la tercera opción). Esto funciona para mi.


0

Al escribir 'mi IP' en la búsqueda de Google, obtuve mi dirección IP pública y la pegué en la dirección IP (la tercera opción). Esto funciona para mi.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.