lab.kpp3/index.html at master · Shindred/lab.kpp3 · GitHub

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Google Maps</title>
        <style>
            #map{
                height:400px;
                width:100%;
            }
        </style>
    </head>
    <body>
        <h1>My Google Map</h1>
        <div id="map"></div>
        <script>
            let map;
            function initMap(){
                var options = {
                    zoom:8,
                    center:{lat:49.233083,lng:28.468217}
                }
                map = new google.maps.Map(document.getElementById("map"), options);
            }
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpE2OU2Ry6FlFizeTMNxI6gbZEmLdwDCM&callback=initMap">
        </script>
        <script>
                fetch('https://api.openweathermap.org/data/2.5/weather?q=Vinnytsia&appid=1b5ee5a1a74d624a74750350327ea372')
                .then(function(response) {
                    response.json().then(function(data) {

                        console.log(data);
                        const icon = data['weather'][0]['icon'];
                        const iconUrl = `http://openweathermap.org/img/w/${icon}.png`;
                        console.log(iconUrl);

                        var marker = new google.maps.Marker({
                            position:{lat:49.233083,lng:28.468217},
                            map:map,
                            icon: iconUrl
                        });
                });
            });
        </script>
    </body>
</html>