Section 24: Time to Practice! - Let's build a Webpage

The goals

💪🏻Practice What We've learned!

 

 

Google Maps SDK

<script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCueuEMBmaAK6XUl6pfsL0J5NTF6HwpjtY"
      defer
    ></script>

export class Map {
  constructor(coords) {
    // this.coordinates = coords;
    this.render(coords);
  }

  render(coordinates) {
    if (!google) {
      alert('Could not load maps library - please try again later!');
      return;
    }

    const map = new google.maps.Map(document.getElementById('map'), {
      center:coordinates,
      zoom: 16
    });

    new google.maps.Marker({
      position: coordinates,
      map: map
    });
  }
}

import { Map } from './UI/Map';

class LoadedPlace {
  constructor(coordinates, address) {
    new Map(coordinates);
    const headerTitleEl = document.querySelector('header h1');
    headerTitleEl.textContent = address;
  }
}

const url = new URL(location.href);
const queryParams = url.searchParams;
const coords = {
  lat: parseFloat(queryParams.get('lat')),
  lng: +queryParams.get('lng')
};
const address = queryParams.get('address');
new LoadedPlace(coords, address);

초과하지 않을 넉넉한 무료 등급을 받았더라도 Google 지도를 사용하려면 불행히도 신용 카드가 필요합니다.

신용 카드가 없는 경우 대안으로 OpenLayers를 쓰는 것도 생각해 볼 수 있습니다(여기에서 지도를 렌더링하는 방법: https://openlayers.org/en/latest/doc/quickstart.html).

저희의 구체적인 예시에서는 다음과 같이 지도를 렌더링합니다:

HTML 파일에 다음의 코드를 포함시켜주세요.

<link rel="stylesheet" 
	href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" 
    type="text/css">
<script 
	src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js">
</script>

Map.js에서 다음의 JS 코드를 사용합니다.

document.getElementById('map').innerHTML = ''; // clear the <p> in the <div id="map">
 
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([coordinates.lng, coordinates.lat]),
    zoom: 16
  })
});

OpenLayers 문서를 둘러보면서 다양한 항목을 렌더링하는 방법을 배울 수 있습니다.

다음 강의에서는 Google API를 사용하여 좌표 쌍을 주소로 또는 그 반대로 변환해볼 겁니다. 이를 위해 Google API도 사용하므로 신용 카드가 필요합니다.

안타깝게도 저는 신용카드가 필요하지 않은 대안을 알지 못하기 때문에 현재로서는 저희가 추가할 유틸리티 함수에서 일부 더미 데이터를 반환하는 것이 해결책이 될 겁니다.

  export async function getAddressFromCoords(coords) {
    return '6th Avenue'; // return any dummy address you want
}
 
  export async function getCoordsFromAddress(address) {
    return {lat: 47.01, lng: 33.55}; // return any dummy coordinates you want
}

 

How to change user's input as location point

async findAddressHandler(event) {
    event.preventDefault();
    const address = event.target.querySelector('input').value;
    if (!address || address.trim().length === 0) {
      alert('Invalid address entered - please try again!');
      return;
    }
    const modal = new Modal(
      'loading-modal-content',
      'Loading location - please wait!'
    );
    modal.show();
    try {
      const coordinates = await getCoordsFromAddress(address);
      this.selectPlace(coordinates, address);
    } catch (err) {
      alert(err.message);
    }
    modal.hide();
  }
}

Clipboard API

class PlaceFinder {
  constructor() {
    const addressForm = document.querySelector('form');
    const locateUserBtn = document.getElementById('locate-btn');
    this.shareBtn = document.getElementById('share-btn');

    locateUserBtn.addEventListener('click', this.locateUserHandler.bind(this));
    this.shareBtn.addEventListener('click', this.sharePlaceHandler);
    addressForm.addEventListener('submit', this.findAddressHandler.bind(this));
  }

  sharePlaceHandler() {
    const sharedLinkInputElement = document.getElementById('share-link');
    if (!navigator.clipboard) {
      sharedLinkInputElement.select();
      return;
    }

    navigator.clipboard.writeText(sharedLinkInputElement.value)
      .then(() => {
        alert('Copied into clipboard!');
      })
      .catch(err => {
        console.log(err);
        sharedLinkInputElement.select();
      });
  }

 

URL.searchParams

The searchParams readonly property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.

const queryParams = url.searchParams;

Stored as key-value paris in constance queryParams.

 

 

 

 

 

 

 

 

Sources

https://developers.google.com/maps

Google Maps Platform  |  Google Developers

https://developers.google.com/maps/documentation/javascript/geolocation

위치정보: 지도에 사용자 또는 기기 위치 표시  |  Maps JavaScript API  |  Google Developers

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

Clipboard API - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams

URL.searchParams - Web APIs | MDN

https://ko.javascript.info/url

URL objects