728x90
반응형
먼저 HTML 파일을 생성하고 사용자의 주소 입력 폼과 지도를 표시할 영역을 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Map Generator</title>
</head>
<body>
<h1>Google Map Generator</h1>
<form id="addressForm">
<label for="address">주소 입력: </label>
<input type="text" id="address" placeholder="주소를 입력하세요">
<button type="submit">지도 생성</button>
</form>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>
이제 JavaScript 파일을 생성하여 사용자가 주소를 입력하고 "지도 생성" 버튼을 눌렀을 때, 해당 주소를 기반으로 Google 지도의 iframe 코드를 생성하고 표시하는 기능을 구현합니다.
document.getElementById("addressForm").addEventListener("submit", function(event) {
event.preventDefault();
const addressInput = document.getElementById("address");
const mapDiv = document.getElementById("map");
const address = addressInput.value;
const encodedAddress = encodeURIComponent(address);
const iframeCode = `<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=${encodedAddress}&key=YOUR_API_KEY" allowfullscreen>
</iframe>`;
mapDiv.innerHTML = iframeCode;
});
위 코드에서 YOUR_API_KEY 부분을 실제 Google Maps Embed API 키로 변경해야 합니다.
이제 사용자가 주소를 입력하고 "지도 생성" 버튼을 누르면 해당 주소를 기반으로 Google 지도의 iframe 코드가 생성되어 페이지에 표시될 것입니다. 필요에 따라 스타일링을 추가하거나 더 다양한 기능을 구현할 수 있습니다.
728x90
반응형
'JS' 카테고리의 다른 글
| JavaScript를 사용하여 새 창을 열기 (0) | 2023.08.11 |
|---|---|
| 이미지 태그 안의 src 값이 실제 파일로 존재하는지 확인 (1) | 2023.08.09 |
| javascript forEach 함수 (0) | 2023.06.21 |
| [JS] JavaScript를 사용하여 이미지를 복사하기 (0) | 2023.05.04 |
| [javascript] javascript에서 배열에 같은 값을 추가 하지 않기 (0) | 2023.03.31 |
