JavaScript - Opciones de posición de diferentes controles en google maps (V3)

 
Vista:
Imágen de perfil de Jose maria
Val: 242
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Opciones de posición de diferentes controles en google maps (V3)

Publicado por Jose maria (18 intervenciones) el 17/06/2014 01:06:23
A propósito de diferentes consultas recibidas, quiero compartir en este foro (del que recibo más ayudas de las que pueda dar) un amplio código, suficientemente comentado, para implementar y modificar al antojo del programador los diferentes controles que nos ofrece Google Maps (V3).


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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
	<title>Mapa simple</title>
<style>
	html { height: 100% }
	body { height: 100%; margin: 0px; padding: 0px }
	#mapa { height: 100% }
</style>
	<script src="https://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
	<script>
<!-- //
var map;
window.onload = function () {
	var opciones = {
	zoom: 8,
	center: new google.maps.LatLng(41.403394,2.175074),
	mapTypeId: google.maps.MapTypeId.HYBRID, // Tipo de mapa que presenta. Puede ser ROADMAP, SATELLITE o TERRAIN
	mapTypeControl: true,
	mapTypeControlOptions: {
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,  // Agrupa los tipos de mapa en un desplegable contrapuesto a HORIZONTAL_BAR
		position: google.maps.ControlPosition.TOP_CENTER
	},   
	panControl: true,
	panControlOptions: {  //Posiciona el círculo de desplazamiento del mapa
		position: google.maps.ControlPosition.TOP_RIGHT
	},
	zoomControl: true,
	zoomControlOptions: {
		style: google.maps.ZoomControlStyle.SMALL, // Solamente muestra en + y - de acercamento del mapa
		//Competo sería LARGE
		position: google.maps.ControlPosition.RIGHT_CENTER
	},
	scaleControl: true,
	scaleControlOptions: {  // Muestra la escala del mapa
		position: google.maps.ControlPosition.BOTTOM_RIGHT
	},
	streetViewControl: true,
	streetViewControlOptions: {  // Posición del muñequito streetView (vista de calle)
		position: google.maps.ControlPosition.TOP_RIGHT
	},
	overviewMapControl: true,  // Este es el cuadradito de la derecha
	overviewMapControlOptions: {
		opened: true
	}
	};
	map = new google.maps.Map(document.getElementById("mapa"), opciones);
	// Creamos un marcador y lo posicionamos en el mapa
	var marker = new google.maps.Marker({
	position: new google.maps.LatLng(41.403394,2.175074),
	/* Posición del marcador */
	map: map
	});
}
// -->
</script>
	</head>
	<body>
	<div id="mapa"></div>
	</body>
</html>

Confío que les sea de interés y ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
1
Responder
Imágen de perfil de xve
Val: 2.213
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Opciones de posición de diferentes controles en google maps (V3)

Publicado por xve (2090 intervenciones) el 17/06/2014 09:02:43
Excelente Jose Maria!!!
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