Skip to content

Commit 38e1696

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

11 files changed

+204
-0
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.ignoreLimitWarning": true
3+
}

‎assets/css/style.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
#map {
2+
height: 100%;
3+
}
4+
5+
html {
6+
height: 70%;
7+
margin: 0%;
8+
padding: 0%;
9+
}
10+
header {
11+
background: #333;
12+
color: white;
13+
height: 80px;
14+
width: 100%;
15+
left: 0;
16+
top: 0;
17+
position: fixed;
18+
}
19+
20+
#logo-header {
21+
float: left;
22+
font-size: 1em;
23+
line-height: 1.5em;
24+
color: #666;
25+
position: absolute;
26+
}
27+
28+
body {
29+
font-family: 'Courier New', Courier, monospace;
30+
height: 100%;
31+
margin: 0%;
32+
padding: 0%;
33+
font-size: 1em;
34+
line-height: 1.5em;
35+
color: #666;
36+
background-color: #f2f2f2;
37+
padding-top: 80px;
38+
}
39+
40+
main {
41+
background: white;
42+
width: 98%;
43+
margin: 20px auto;
44+
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
45+
}
46+
47+
h1 {
48+
padding-top: 20px;
49+
font-size: 20px;
50+
text-align: left;
51+
font-weight: bold;
52+
text-align: center;
53+
}
54+
55+
h2 {
56+
font-size: 18px;
57+
text-align: left;
58+
font-weight: bold;
59+
}
60+
61+
footer {
62+
background: #333;
63+
color: white;
64+
position: relative;
65+
left: 0px;
66+
bottom: 0px;
67+
width: 100%;
68+
height: 100%;
69+
text-align: center;
70+
}
71+
72+
#general-content {
73+
text-align: justify;
74+
padding-left: 40px;
75+
padding-right: 40px;
76+
}
77+
78+
#footer-img-content {
79+
float: inline-start;
80+
}
81+
82+
#footer-img-content ul {
83+
margin: 0;
84+
padding: 0;
85+
list-style: none;
86+
padding-right: 20px;
87+
}
88+
89+
#footer-img-content ul li {
90+
display: inline-block;
91+
line-height: 80px;
92+
}

‎images/favicon.ico

948 Bytes
Binary file not shown.

‎images/favicon.png

1.26 KB
Loading

‎images/logo-css.png

10.2 KB
Loading

‎images/logo-html.png

9.83 KB
Loading

‎images/logo-instagram.png

149 KB
Loading

‎images/logo-jspng.png

9.32 KB
Loading

‎images/logo-twitter.png

562 KB
Loading

‎index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Practica 7</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
9+
10+
<!-- Favicon icon -->
11+
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon.png">
12+
<!-- Custom CSS -->
13+
<link href="./assets/css/style.css" rel="stylesheet">
14+
15+
</head>
16+
17+
<body>
18+
<header>
19+
<a id="logo-header">
20+
<img src="./images/logo-html.png" alt="logotipo" width="50" height="50">
21+
<img src="./images/logo-css.png" alt="logotipo" width="50" height="50">
22+
<img src="./images/logo-jspng.png" alt="logotipo" width="50" height="50">
23+
</a>
24+
<h1>DIPLOMADO UNIVO - Maps JavaScript API</h1>
25+
</header>
26+
<main>
27+
<div id="general-content"></div>
28+
</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>
39+
<div id="map"></div>
40+
<footer>
41+
<div id="footer-img-content">
42+
<a href="https://twitter.com/ChuyGonzalezDev"><img alt="Logotipo Twitter" src="./images/logo-twitter.png"
43+
width="40" height="40"></a>
44+
<a href="https://www.instagram.com/chuygonzalezdev"><img alt="Logotipo Instagram"
45+
src="./images/logo-instagram.png" width="40" height="40"></a>
46+
</div>
47+
<p><strong>Autor:</strong> Jesús M. González Gómez - @2021</p>
48+
</footer>
49+
<script src="./script.js"></script>
50+
<script
51+
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2NVosc2MJLaMw8eAFqbh-g0Wjqg3JNvc&callback=iniciarMap"
52+
async defer></script>
53+
</body>
54+
55+
</html>

‎script.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
console.log("Practica 7");
2+
/** Variables Globales */
3+
let map;
4+
let marcadoresArray = [];
5+
let marcador;
6+
let lat = 18.9038592;
7+
let lng = -98.9736192;
8+
9+
function iniciarMap() {
10+
map = new google.maps.Map(document.getElementById("map"), {
11+
center: { lat: 18.9038592, lng: -98.9736192 },
12+
zoom: 8,
13+
});
14+
15+
marcador = new google.maps.Marker({
16+
position: { lat: 18.9038592, lng: -98.9736192 },
17+
map: map,
18+
draggable: true,
19+
animation: google.maps.Animation.DROP,
20+
title: "Marcador 1",
21+
});
22+
}
23+
24+
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,
33+
animation: google.maps.Animation.DROP,
34+
icon:
35+
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
36+
title: nombre,
37+
});
38+
39+
let infowindow = new google.maps.InfoWindow();
40+
infowindow.setContent(nombre);
41+
42+
marcador.addListener("click", () => {
43+
infowindow.open(map, marcador);
44+
});
45+
46+
marcadoresArray.push(marcador);
47+
}
48+
49+
function eliminarMarcadores(params) {
50+
marcadoresArray.forEach((e) => {
51+
e.setMap(null);
52+
});
53+
marcadoresArray = [];
54+
}

0 commit comments

Comments
 (0)