Clave de API de Googlemaps para Localhost

¿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.

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

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.

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.

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.

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

• Haga clic en este enlace y siga el proceso (crear un nuevo proyecto, clave API> clave del navegador, registrar el dominio 'localhost'): https://console.developers.google.com//flows/enableapi?apiid=maps_backend&keyType=CLIENT_SIDE&reusekey=true
• Genera la clave
• Implemente el widget de Google Maps como se describe aquí: http://www2.microstrategy.com/producthelp/10/GISHelp/Lang_1033/GIS_Integration.htm
• Agregue su clave API de Google Maps a googleConfig.xml (como se describe en el enlace anterior) ENTER_YOUR_KEY_HERE
• Reiniciar el servidor web

Verifique estos hilos SO relacionados:

• La clave API de Google Maps v3 no funcionará para las pruebas locales
• Cómo usar la API simple de Google Maps en localhost
• La api de Google Maps v3 para localhost no funciona

¡Espero que esto ayude!

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 .

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.

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 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.