Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » PHP » incluir un mapa en una página web

PHP - incluir un mapa en una página web

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Víctor
Val: 152
Ha disminuido su posición en 6 puestos en PHP (en relación al último mes)
Gráfica de PHP

incluir un mapa en una página web

Publicado por Víctor (192 intervenciones) el 29/11/2016 19:36:09
Hola:

Quiero incluir un mapa de google maps a partir de coordenadas. He leído varios tutoriales y ninguno me funciona. Debe haber algo que se me escapa. En el mejor de los casos sale el mapa y luego dice que se ha producido un error y que mires en la consola.

El código es:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>prueba006</title>
		<style>
			html, body, #mapa {

				height: 100%;
				margin: 0px;
				padding: 0px;
			}
		</style>
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
		<script>
			function initialize() {
				var mapOptions = {// Opciones del mapa

					center: new google.maps.LatLng(-6.4927762,-76.362211),// Coordenadas

					zoom: 15,
					mapTypeId: google.maps.MapTypeId.HIBRID,// Son los tipos de mapas ROADMAP, SATELLITE, HIDRID

					mapTypeControl: false, // Cambiar tipos de mapas

				};
				var map = new google.maps.Map(document.getElementById('mapa'),mapOptions);//Variable agragada al contenedor "mapa"

			}
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
 
 
	</head>
	<body>
		<div id="mapa"></div> <!-- Caja del mapa -->
	</body>
</html>

y lo que sale por la consola es:

js?v=3.exp&sensor=false:34 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

_.jb @ js?v=3.exp&sensor=false:34

(anonymous function) @ common.js:50

(anonymous function) @ common.js:204

c @ common.js:44

(anonymous function) @ AuthenticationService.Authenticate?1shttp%3A%2F%2Fwww.vjrm.com.es%2Fprueba006.php&callback=_xdc_._s…:1util.js:210

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

SA.j @ util.js:210

(anonymous function) @ js?v=3.exp&sensor=false:126

(anonymous function) @ js?v=3.exp&sensor=false:46

(anonymous function) @ js?v=3.exp&sensor=false:43

(anonymous function) @ js?v=3.exp&sensor=false:46

_.F @ js?v=3.exp&sensor=false:45

(anonymous function) @ js?v=3.exp&sensor=false:46

_.v @ js?v=3.exp&sensor=false:31

mc @ js?v=3.exp&sensor=false:46

(anonymous function) @ js?v=3.exp&sensor=false:126

util.js:210

Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

SA.j @ util.js:210(anonymous function) @ js?v=3.exp&sensor=false:126

(anonymous function) @ js?v=3.exp&sensor=false:46

(anonymous function) @ js?v=3.exp&sensor=false:43

(anonymous function) @ js?v=3.exp&sensor=false:46

_.F @ js?v=3.exp&sensor=false:45

(anonymous function) @ js?v=3.exp&sensor=false:46

_.v @ js?v=3.exp&sensor=false:31

mc @ js?v=3.exp&sensor=false:46

(anonymous function) @ js?v=3.exp&sensor=false:126

Si alguien puede ayudarme se lo agradecería mucho

Saludos de Víctor.-
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip
Val: 2.325
Plata
Ha disminuido 1 puesto en PHP (en relación al último mes)
Gráfica de PHP

incluir un mapa en una página web

Publicado por kip (877 intervenciones) el 29/11/2016 20:38:38
Hola, el problema te lo dice claramente, necesitas la API KEY para poder consumir la API de Google, la llamada a esta debe ser asi:

1
2
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

Si te fijas debes enviarle como parametro la API KEY que se genero para tu proyecto.

Aqui en este enlace, justo debajo de ejemplos y demostracion de codigo se encuentra un boton y una pequeña guia para obtener la API KEY:

https://developers.google.com/maps/documentation/javascript/?hl=es-419

De todas formas tambien te dejo este otro enlace:

https://developers.google.com/maps/documentation/javascript/get-api-key?hl=es-419

Nos cuentas si lograste hacer funcionar el mapa.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Víctor
Val: 152
Ha disminuido su posición en 6 puestos en PHP (en relación al último mes)
Gráfica de PHP

incluir un mapa en una página web

Publicado por Víctor (192 intervenciones) el 30/11/2016 09:43:56
Hola:

Gracias por contestar.

He generado la clave, pero sigue sin funcionar. Me da este error:

js?key=AizaSyAJoyQekGrF0fzwr0PZahpmLHuJWZqcaaE&sensor=false:34 Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

La llamada ha quedado así:

1
<script src="https://maps.googleapis.com/maps/api/js?key=AizaSyAJoyQekGrF0fzwr0PZahpmLHuJWZqcaaE&sensor=false"></script>

Saludos de Víctor.-
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Víctor
Val: 152
Ha disminuido su posición en 6 puestos en PHP (en relación al último mes)
Gráfica de PHP

incluir un mapa en una página web

Publicado por Víctor (192 intervenciones) el 30/11/2016 10:11:50
Hola de nuevo:

Ahora si funciona. Debía de ser que la clave tarda algo en activarse.

Gracias por la ayuda.

Saludos de Víctor.-
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar