맹주환 / take_an_umbrella

Go to a project
Toggle navigation Toggle navigation pinning
맹주환
45ceb396 1 parent 4d6e21fa

Add Google Maps API to find Weather data based on Current Location

Inline Side-by-side
Showing 4 changed files with 103 additions and 0 deletions
1 +// Note: This example requires that you consent to location sharing when
2 +// prompted by your browser. If you see the error "The Geolocation service
3 +// failed.", it means you probably did not give permission for the browser to
4 +// locate you.
5 +let map, infoWindow;
6 +
7 +function initMap() {
8 + map = new google.maps.Map(document.getElementById("map"), {
9 + center: { lat: 37.5642135, lng: 127.0016985 },
10 + zoom: 6,
11 + });
12 + infoWindow = new google.maps.InfoWindow();
13 +
14 + const locationButton = document.createElement("button");
15 +
16 + locationButton.textContent = "Pan to Current Location";
17 + locationButton.classList.add("custom-map-control-button");
18 + map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
19 + locationButton.addEventListener("click", () => {
20 + // Try HTML5 geolocation.
21 + if (navigator.geolocation) {
22 + navigator.geolocation.getCurrentPosition(
23 + (position) => {
24 + const pos = {
25 + lat: position.coords.latitude,
26 + lng: position.coords.longitude,
27 + };
28 + alert(pos.lat , pos.lng);
29 + infoWindow.setPosition(pos);
30 + infoWindow.setContent("Location found.");
31 + infoWindow.open(map);
32 + map.setCenter(pos);
33 +
34 + },
35 + () => {
36 + handleLocationError(true, infoWindow, map.getCenter());
37 + }
38 + );
39 + } else {
40 + // Browser doesn't support Geolocation
41 + handleLocationError(false, infoWindow, map.getCenter());
42 + }
43 + });
44 +}
45 +
46 +function handleLocationError(browserHasGeolocation, infoWindow, pos) {
47 + infoWindow.setPosition(pos);
48 + infoWindow.setContent(
49 + browserHasGeolocation
50 + ? "Error: The Geolocation service failed."
51 + : "Error: Your browser doesn't support geolocation."
52 + );
53 + infoWindow.open(map);
54 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>Geolocation</title>
5 + <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
6 + <link rel="stylesheet" type="text/css" href="./style.css" />
7 + <script src="./index.js"></script>
8 + </head>
9 + <body>
10 + <div id="map"></div>
11 +
12 + <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
13 + <script
14 + src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAguo3zH8vWZJbzXEqyp8D8UvnBh3zX8rQ&callback=initMap&v=weekly"
15 + async
16 + ></script>
17 + </body>
18 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +/* Always set the map height explicitly to define the size of the div
2 + * element that contains the map. */
3 + #map {
4 + height: 100%;
5 + }
6 +
7 + /* Optional: Makes the sample page fill the window. */
8 + html,
9 + body {
10 + height: 100%;
11 + margin: 0;
12 + padding: 0;
13 + }
14 +
15 + .custom-map-control-button {
16 + background-color: #fff;
17 + border: 0;
18 + border-radius: 2px;
19 + box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
20 + margin: 10px;
21 + padding: 0 0.5em;
22 + font: 400 18px Roboto, Arial, sans-serif;
23 + overflow: hidden;
24 + height: 40px;
25 + cursor: pointer;
26 + }
27 + .custom-map-control-button:hover {
28 + background: #ebebeb;
29 + }
30 +
...\ No newline at end of file ...\ No newline at end of file
1 +경위도 : https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=ko#maps_map_geolocation-javascript
...\ No newline at end of file ...\ No newline at end of file
......