JavaScript - cargar mapa con un boton

 
Vista:

cargar mapa con un boton

Publicado por zefalo (10 intervenciones) el 26/05/2015 10:00:14
Tengo este codigo:

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
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mapa de Google Maps</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxRtRsfDk493hmU5c5jQs6OFV5O7GaVmA&v=3&sensor=TRUE" type="text/javascript"></script>
 
<!--<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;" type="text/javascript"></script> -->
<script>
function empezar(){
	document.write("<div id='map'></div>");
	iniciar();
}
 
function iniciar() {
	var mapOptions = {
		center: new google.maps.LatLng(25.80, -80.30),
		zoom: 10,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map"),mapOptions);
}
</script>
<input type="button" onclick="empezar();" value="prueba">
</body>
</html>

En la consola de chrome aparece como que carga, pero la pantalla esta en blanco, alguien sabe porque?
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 txema
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

cargar mapa con un boton

Publicado por txema (25 intervenciones) el 26/05/2015 20:12:30
Hola zefalo

Tienes varios errores:
1.- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxRtRsfDk493hmU5c5jQs6OFV5O7GaVmA&v=3&sensor=TRUE" type="text/javascript"></script>
Esto es la versión 2 ya caducada. Tienes que cambiar por <script src="http://maps.google.com/maps/api/js?sensor=false"></script> a menos que tengas la versión de empresas que sí requieren la KEY correspondiente.
2.- No veo un espacio (CSS) para mostrar el mapa (si no le das espacio, no lo muestra). Es un ejemplo pero podrías poner <div id="map" style="float:left;width:100%;height:100%"></div
3.- Complicas el mostrar el mapa al hacerlo con un div dentro del javascript que a su vez está dentro del <body>. Sería más práctico mostarlo con un display (que no lo recojo en el código que te muestro):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html lang="es">
 
<head>
    <meta charset="utf-8">
    <title>Mapa de Google Maps</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
        function iniciar() {
            var mapOptions = {
                center: new google.maps.LatLng(25.80, -80.30),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', iniciar);
    </script>
</head>
 
<body>
    <div id="map" style="float:left;width:100%;height:100%"></div>
</body>
 
</html>

Obviamente, eliminé la función empezar()

Si es importante la función del botón para mostrar el mapa, nos lo comentas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

cargar mapa con un boton

Publicado por xve (2100 intervenciones) el 27/05/2015 07:37:26
Excelente Txema!!!
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

cargar mapa con un boton

Publicado por zefalo (10 intervenciones) el 27/05/2015 09:20:29
Muchas gracias, ya me estaba desquiciando ^^ me ha servido de mucho
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

cargar mapa con un boton

Publicado por CHANTALL (1 intervención) el 14/02/2020 22:29:30
hola muchas gracias por tu solución, si cargo el mapa, pero ya no aparece el boton
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