Skip to content

Commit 9cbcdfe

Browse files
ChuyGonzalezDevChuyGonzalezDev
committed
Practica Siete - Google Maps
1 parent 38e1696 commit 9cbcdfe

File tree

6 files changed

+179
-49
lines changed

6 files changed

+179
-49
lines changed

‎.vscode/launch.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "pwa-chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:8080",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎assets/css/style.css

+25-5
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ html {
77
margin: 0%;
88
padding: 0%;
99
}
10+
1011
header {
1112
background: #333;
1213
color: white;
13-
height: 80px;
14+
height: 100px;
1415
width: 100%;
1516
left: 0;
1617
top: 0;
@@ -47,15 +48,35 @@ main {
4748
h1 {
4849
padding-top: 20px;
4950
font-size: 20px;
50-
text-align: left;
5151
font-weight: bold;
5252
text-align: center;
5353
}
5454

5555
h2 {
5656
font-size: 18px;
57-
text-align: left;
5857
font-weight: bold;
58+
text-align: center;
59+
}
60+
61+
table {
62+
width: 100%;
63+
border-collapse: collapse;
64+
border: 3px solid black;
65+
text-align: center;
66+
}
67+
68+
table td {
69+
border: 1px, solid, black;
70+
}
71+
72+
table th {
73+
border: 1px, solid, black;
74+
}
75+
76+
table tr {
77+
border-style: solid;
78+
border-color: black;
79+
border-width: 1px;
5980
}
6081

6182
footer {
@@ -65,7 +86,6 @@ footer {
6586
left: 0px;
6687
bottom: 0px;
6788
width: 100%;
68-
height: 100%;
6989
text-align: center;
7090
}
7191

@@ -88,5 +108,5 @@ footer {
88108

89109
#footer-img-content ul li {
90110
display: inline-block;
91-
line-height: 80px;
111+
line-height: 50px;
92112
}

‎images/favicon.png

2.18 KB
Loading

‎images/logo-maps.png

3.44 KB
Loading

‎index.html

+23-16
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@
55
<title>Practica 7</title>
66
<meta charset="utf-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
98

109
<!-- Favicon icon -->
1110
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon.png">
1211
<!-- Custom CSS -->
1312
<link href="./assets/css/style.css" rel="stylesheet">
14-
13+
<script src="./script.js"></script>
1514
</head>
1615

1716
<body>
@@ -21,21 +20,29 @@
2120
<img src="./images/logo-css.png" alt="logotipo" width="50" height="50">
2221
<img src="./images/logo-jspng.png" alt="logotipo" width="50" height="50">
2322
</a>
24-
<h1>DIPLOMADO UNIVO - Maps JavaScript API</h1>
23+
<h1>DIPLOMADO UNIVO</h1>
24+
<h2>Practica Siete - Google Maps</h2>
2525
</header>
2626
<main>
27-
<div id="general-content"></div>
27+
<div id="general-content">
28+
<div id="controles">
29+
<h1>Marcadores de Google Maps</h1>
30+
<input type="text" id="txtNombre" placeholder="Nombre" />
31+
<input type="text" id="txtLat" placeholder="Latitud" />
32+
<input type="text" id="txtLng" placeholder="Longitud" />
33+
</div>
34+
<br />
35+
<div>
36+
<button id="btnAgregar" type="button" onclick="agregarMarcadores()">Agregar Marcador</button>
37+
<button id="btnEliminar" type="button" onclick="eliminarMarcadores()">Eliminar Marcador</button>
38+
</div>
39+
<br />
40+
<!-- Div para mostrar resultados de marcadores agregados. -->
41+
<div id="divTablaMarcadores">
42+
<table></table>
43+
</div>
44+
</div>
2845
</main>
29-
<div id="controles">
30-
<h1>Marcadores de Google Maps</h1>
31-
<input type="text" id="txtNombre" placeholder="Nombre" />
32-
<input type="text" id="txtLat" placeholder="Latitud" />
33-
<input type="text" id="txtLong" placeholder="Longitud" />
34-
35-
<button id="btnAgregar" type="button" onclick="agregarMarcadores()">Agregar Marcador</button>
36-
<button id="btnEliminar" type="button" onclick="eliminarMarcadores()">Eliminar Marcador</button>
37-
<!-- Agregar marcador y limpiar caja de texto. Agregar marcador y generar tabla con los datos. -->
38-
</div>
3946
<div id="map"></div>
4047
<footer>
4148
<div id="footer-img-content">
@@ -46,10 +53,10 @@ <h1>Marcadores de Google Maps</h1>
4653
</div>
4754
<p><strong>Autor:</strong> Jesús M. González Gómez - @2021</p>
4855
</footer>
49-
<script src="./script.js"></script>
5056
<script
5157
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2NVosc2MJLaMw8eAFqbh-g0Wjqg3JNvc&callback=iniciarMap"
52-
async defer></script>
58+
async defer>
59+
</script>
5360
</body>
5461

5562
</html>

‎script.js

+116-28
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,142 @@
11
console.log("Practica 7");
22
/** Variables Globales */
33
let map;
4+
let btnEliminar;
45
let marcadoresArray = [];
5-
let marcador;
6-
let lat = 18.9038592;
7-
let lng = -98.9736192;
6+
let markersArray = [];
7+
let lat = 18.8690435;
8+
let lng = -97.0984946;
9+
10+
let nombre = "";
11+
const colors = ["blue", "red", "black", "green", "orange"];
12+
let colorIndex = 0;
13+
14+
/** Clase global para los valores de Latitud y Longitud. */
15+
let myLatLng = { lat: lat, lng: lng };
16+
17+
/** Opciones iniciales del mapa. */
18+
let mapOptions = {
19+
center: myLatLng,
20+
zoom: 8,
21+
};
822

923
function iniciarMap() {
10-
map = new google.maps.Map(document.getElementById("map"), {
11-
center: { lat: 18.9038592, lng: -98.9736192 },
12-
zoom: 8,
13-
});
24+
btnEliminar = document.getElementById("btnEliminar");
25+
btnEliminar.disabled = true;
26+
map = new google.maps.Map(document.getElementById("map"), mapOptions);
1427

15-
marcador = new google.maps.Marker({
16-
position: { lat: 18.9038592, lng: -98.9736192 },
17-
map: map,
18-
draggable: true,
28+
let marker = new google.maps.Marker({
29+
position: myLatLng,
1930
animation: google.maps.Animation.DROP,
20-
title: "Marcador 1",
31+
icon:
32+
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
33+
title: "Universidad del Valle de Orizaba",
34+
});
35+
36+
marker.setMap(map);
37+
38+
let infowindow = new google.maps.InfoWindow();
39+
infowindow.setContent(
40+
"<strong>" +
41+
marker.title +
42+
"</strong><br /><strong> Coordenadas:</strong>" +
43+
marker.position
44+
);
45+
46+
marker.addListener("click", () => {
47+
infowindow.open(map, marker);
2148
});
2249
}
2350

2451
function agregarMarcadores() {
25-
let long = document.getElementById("txtLong").value;
26-
let lat = document.getElementById("txtLat").value;
27-
let nombre = document.getElementById("txtNombre").value;
28-
29-
marcador = new google.maps.Marker({
30-
position: { lat: parseFloat(lat), lng: parseFloat(long) },
31-
map: map,
32-
draggable: true,
52+
document.getElementById("divTablaMarcadores").innerHTML = "";
53+
let txtLat = document.getElementById("txtLat").value;
54+
let txtLng = document.getElementById("txtLng").value;
55+
let txtNombre = document.getElementById("txtNombre").value;
56+
57+
lat = txtLat;
58+
lng = txtLng;
59+
nombre = txtNombre;
60+
myLatLng = { lat: parseFloat(lat), lng: parseFloat(lng) };
61+
62+
const svgMarker = {
63+
path:
64+
"M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
65+
fillColor: colors[colorIndex++ % colors.length],
66+
fillOpacity: 1.0,
67+
strokeWeight: 0,
68+
rotation: 0,
69+
scale: 2,
70+
anchor: new google.maps.Point(15, 30),
71+
};
72+
73+
let marker = new google.maps.Marker({
74+
position: myLatLng,
3375
animation: google.maps.Animation.DROP,
34-
icon:
35-
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
76+
icon: svgMarker,
3677
title: nombre,
3778
});
3879

80+
marker.setMap(map);
81+
3982
let infowindow = new google.maps.InfoWindow();
40-
infowindow.setContent(nombre);
83+
infowindow.setContent(
84+
"<strong>" +
85+
marker.title +
86+
"</strong><br /><strong> Coordenadas:</strong>" +
87+
marker.position
88+
);
4189

42-
marcador.addListener("click", () => {
43-
infowindow.open(map, marcador);
90+
marker.addListener("click", () => {
91+
infowindow.open(map, marker);
4492
});
4593

46-
marcadoresArray.push(marcador);
94+
/** Agregar Marcador */
95+
markersArray.push(marker);
96+
agregarMarcador();
97+
mostrarTablaMarcadores();
98+
limpiarInputs();
4799
}
48100

49-
function eliminarMarcadores(params) {
50-
marcadoresArray.forEach((e) => {
101+
/** Elimina Marcadores del mapa. */
102+
function eliminarMarcadores() {
103+
markersArray.forEach((e) => {
51104
e.setMap(null);
52105
});
106+
markersArray = [];
53107
marcadoresArray = [];
108+
document.getElementById("divTablaMarcadores").innerHTML = "";
109+
btnEliminar.disabled = true;
110+
}
111+
112+
/** Arma el arreglo de marcadores. */
113+
function agregarMarcador() {
114+
marcadoresArray.push({
115+
_nombre: nombre,
116+
_lat: lat,
117+
_lng: lng,
118+
});
119+
btnEliminar.disabled = false;
120+
}
121+
122+
function mostrarTablaMarcadores() {
123+
let resultado =
124+
"<table><thead> <tr> <th>Nombre</th> <th>Latitud</th> <th>Longitud</th> </tr> </thead>";
125+
resultado += "<tbody>";
126+
marcadoresArray.forEach((e) => {
127+
resultado += "<tr>";
128+
resultado += "<td>" + e._nombre + "</td>";
129+
resultado += "<td>" + e._lat + "</td>";
130+
resultado += "<td>" + e._lng + "</td>";
131+
resultado += "</tr>";
132+
});
133+
resultado += "</tbody> </table>";
134+
document.getElementById("divTablaMarcadores").innerHTML = resultado;
135+
}
136+
137+
/** Limpia los inputs del formularios. */
138+
function limpiarInputs() {
139+
document.getElementById("txtNombre").value = "";
140+
document.getElementById("txtLng").value = "";
141+
document.getElementById("txtLat").value = "";
54142
}

0 commit comments

Comments
 (0)