Infowindow en el mapa
Publicado por maría (1 intervención) el 24/06/2016 12:37:10
Hola! yo tengo el siguiente código, y quiero mostrar la información del API de la USGS pero lo que no sé hacer es mostar una ventana de información al hacer click sobre el icono, si pudieseis echarme una mano...Gracias!
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<body>
<!--Columna izquierda--><div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h1 class="text-center"></h1>
<div class="text-center">
<h2>USGS</h2>
<p>Localizador de terremotos</p>
</div>
</div>
<!--Columna central--><!--Buscador--><div class="col-sm-9">
<div class="jumbotron text-center" style="background: #F5F5F5; ">
<h2>LOCALIZADOR DE TERREMOTOS</h2>
</div>
<h3>Escoge la información que quieres obtener:</h3>
<table>
<tr>
<td><p><label>Periodo</label></p></td>
<td><select id="periodo">
<option value="_hour">Hace 1 hora</option>
<option value="_day">Hace 1 día</option>
<option value="_week">Hace 7 días</option>
<option value="_month">Hace 30 días</option>
</select></td>
</tr>
<tr>
<td><p><label>Magnitud</label></p></td>
<td><select id="magnitud">
<option value="1.0">M1.0+</option>
<option value="2.5">M2.5+</option>
<option value="4.5">M4.5+</option>
<option value="all">Todos</option>
</select></td>
</tr>
</table>
<button id="buscador" class="btn btn-info btn-block" onclick="load()">Buscar</button>
<!--Mapa--><div id="map" style="width:100%; height: 600px; ">
</div>
<!--Botones--><button id="reinicio" class="btn btn-danger btn-block" onclick="javascript:location.reload()">Reiniciar búsqueda</button>
<div class="container">
<div class="btn-group btn-group-justified">
<button type="button" style=" margin-top: 2%; margin-bottom: 1%; "id="show" href="#" class="btn-primary">Mostrar tabla</button>
<button type="button" style=" margin-top: 2%; margin-bottom: 1%; "id="hide" href="#" class="btn-primary">Ocultar tabla</button>
</div>
</div>
<br><br><br><br>
<div class="row">
<table class="table table-hover" id="table">
<thead> <tr>
<th> Magnitud </th>
<th> Título </th>
<th> Localización </th>
</tr></thead>
</table>
</div>
</div>
</div>
<br><br><br><br>
</div>
<script>
//Variables mapa
var map = null;var lati = 40.41558722527384;
var longi = -3.6968994140625;
var zoom = 2;var puntos = new Array();
var lat;
var lon;
var marcadores = [];
var per="_week";
var mag="all";
$("#table").hide();
$("#show").hide();
$("#hide").hide();
$("#reinicio").hide();
function load() {
$("#buscador").hide();
$("#reinicio").show();
$("#show").show();
$("#hide").show();
mag = document.getElementById("magnitud").value;
per = document.getElementById("periodo").value;
var mapOptions = {
center: new google.maps.LatLng(lati, longi),
zoom: 2,
mapTypeId: google.maps.MapTypeId.MAP
};map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/'+mag+per+'.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
icon: getIcono(i),
map: map});
} }function getIcono(i) {
var punto = puntos[i];
var icono = {
url: 'icono.png',
origin: new google.maps.Point(0, 0),
};return icono;
} };</script>
</body>
Valora esta pregunta
0