🆓 FREE PROJECT

🗺️ Урок 6: Карта з маршрутом

🗺️ Бачиш де їде твоє таксі?

Відкриваєш Bolt — і бачиш карту з маршрутом! Як це працює?

🖼️ iframe — вікно в інший світ (Google Maps)

🔗 src — адреса того світу

✨ JavaScript — змінює адресу = змінює карту!

Сьогодні ми вбудовуємо СПРАВЖНЮ карту! 🚖

💡

А ТИ ЗНАВ?

🗺️ Google Maps вбудовано на понад 5 мільйонів сайтів!
🚕 Bolt та Uber показують карти саме через iframe або Maps SDK
🔐 encodeURIComponent() — захист від XSS атак та помилок URL!

😂 Жарт для розігріву!

Чому програміст не може знайти дорогу додому?

Бо забув викликати encodeURIComponent() для своєї адреси! 🗺️😅

📱 ЖИВИЙ ДОДАТОК

Спробуй маршрут на карті!

9:41 🔋 100%

🗺️ МАРШРУТ

🗺️

Натисни кнопку для карти

👆 Введи адреси → натисни "Показати маршрут" → побачиш карту!

🖼️

Що таке iframe?

iframe (inline frame) — це вікно в інший сайт прямо на твоїй сторінці!

Через src атрибут ти вказуєш адресу сайту. Змінюєш src через JavaScript — і вікно показує інший контент!

iframe src 🗺️ Maps API

📺

iframe — це телевізор у стіні

Уяви: у твоїй кімнаті є вікно-телевізор. Через нього ти бачиш інший світ (Google Maps).

src — це пульт! Змінюєш канал (адресу) — змінюється картинка.

А encodeURIComponent() — це перекладач, який перетворює "вул. Хрещатик, 22" на мову URL: вул.%20Хрещатик%2C%2022

🔬

Анатомія iframe

Натисни на частини коду щоб дізнатись більше

<iframe

id="mapFrame"

src="https://maps.google.com/..."

width="100%"

height="300"

loading="lazy"

></iframe>

Натисни на рядок коду щоб побачити пояснення!

🔗

URL для карти

Натисни на частини URL щоб зрозуміти структуру

https://maps.google.com/maps ? q = Київ & output = embed

Натисни на частину URL щоб побачити пояснення!

🔐

encodeURIComponent()

Перетворює текст у безпечний URL

Оригінал:

Київ, Хрещатик 22

→

Закодовано:

—

iframe — вікно в інший світ

📺

iframe — це як телевізор на стіні. Він показує контент з іншого сайту прямо на твоїй сторінці. Атрибут src — це канал (адреса)!

Напиши цей код:

<iframe id="mapFrame" width="100%" height="300" style="border:0" loading="lazy" src="https://maps.google.com/maps?q=Kyiv&output=embed" ></iframe>

Що тут відбувається:
• iframe — створює вікно для іншого сайту
• src — адреса Google Maps з параметрами
• loading="lazy" — завантажує коли з'явиться на екрані (економія ресурсів!)
• ?q=Kyiv — пошуковий запит (що показати на карті)
• &output=embed — режим вбудовування

🧪 Тест: loading="lazy" означає...

encodeURIComponent() — безпека URL

🔐

URL не розуміє пробіли та кирилицю! encodeURIComponent() — це перекладач, який перетворює "Київ, Хрещатик" на %D0%9A%D0%B8%D1%97%D0%B2. Без цього URL зламається!

Напиши цей код:

// Отримуємо адресу від користувача const address = "Київ, Хрещатик 22"; // Кодуємо для безпечного URL const encoded = encodeURIComponent(address); console.log(encoded); // Результат: %D0%9A%D0%B8%D1%97%D0%B2%2C%20%D0%A5%D1%80%D0%B5%D1%89%D0%B0%D1%82%D0%B8%D0%BA%2022

Навіщо кодувати?
• Пробіли стають %20
• Коми стають %2C
• Кирилиця кодується в %D0%...
• Це захищає від XSS атак та помилок URL!

🧪 Тест: encodeURIComponent() потрібен щоб...

Динамічна зміна карти через JS

🎮

Змінюєш src у iframe через JavaScript — і карта миттєво оновлюється! Це як переключення каналів на пульті. Один клік — нова карта!

Напиши цей код:

// Знаходимо елементи const mapFrame = document.getElementById('mapFrame'); const fromInput = document.getElementById('fromAddress'); const toInput = document.getElementById('toAddress'); const showBtn = document.getElementById('showRoute'); // Обробник кліку showBtn.addEventListener('click', function() { // Кодуємо адреси const from = encodeURIComponent(fromInput.value); const to = encodeURIComponent(toInput.value); // Будуємо URL з маршрутом const mapUrl = 'https://maps.google.com/maps?saddr=' + from + '&daddr=' + to + '&output=embed'; // Оновлюємо iframe mapFrame.src = mapUrl; });

Що тут відбувається:
• saddr — start address (звідки)
• daddr — destination address (куди)
• mapFrame.src = mapUrl — змінюємо адресу iframe
• Карта автоматично перезавантажується з новим маршрутом!

🧪 Тест: Для зміни карти через JS потрібно змінити...

🏆 Що ти вивчив:

✓ iframe — вбудовувати зовнішній контент

✓ Google Maps Embed — вбудовувати карту

✓ encodeURIComponent() — безпечно кодувати URL

✓ element.src — динамічно змінювати карту

✅ Коли все працює:

Натисни "Готово" в редакторі!

⏱️ ~20 хв • Урок 6 з 8

Потрібна допомога?

💡 Підказка

🤖 AI-KOODI

index.html ✏️

style.css

app.js

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚖 Koodi Taxi — Карта</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- =============================================
         🗺️ ЗАВДАННЯ: Карта з маршрутом
         =============================================

         Створи інтерфейс для карти:
         ✅ div (mapSection) — контейнер секції
         ✅ h2 — заголовок "🗺️ Твій маршрут"
         ✅ input (fromAddress) — поле "Звідки?"
         ✅ input (toAddress) — поле "Куди?"
         ✅ button (showRoute) — "🗺️ Показати маршрут"
         ✅ iframe (mapFrame) — карта

         ⬇️ ПИШИ КОД НИЖЧЕ ⬇️
    -->

    <div id="app">
        <h1>🚖 Koodi Taxi</h1>

        <!-- Твій код тут -->

    </div>

    <script src="app.js"></script>
</body>
</html>

/* =============================================
   🎨 СТИЛІ ДЛЯ KOODI TAXI — КАРТА
   =============================================
   Стилі готові! Фокус уроку — iframe та Maps.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #1A1A2E, #16213e);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#app {
    background: rgba(255, 213, 0, 0.1);
    padding: 30px;
    border-radius: 25px;
    border: 3px solid #FFD500;
    text-align: center;
    max-width: 500px;
    width: 100%;
}

h1 {
    color: #FFD500;
    font-size: 1.8em;
    margin-bottom: 20px;
}

#mapSection {
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 15px;
}

#mapSection h2 {
    color: #FFD500;
    font-size: 1.2em;
    margin-bottom: 15px;
}

input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #FFD500;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    color: #FFF;
    font-size: 1em;
    margin-bottom: 10px;
    outline: none;
}

input::placeholder {
    color: rgba(255,255,255,0.5);
}

input:focus {
    background: rgba(255,213,0,0.1);
}

button {
    width: 100%;
    padding: 15px;
    border: 3px solid #000;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    background: linear-gradient(135deg, #FFD500, #E5BF00);
    color: #000;
}

button:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 20px rgba(255,213,0,0.3);
}

#mapFrame {
    width: 100%;
    height: 250px;
    border-radius: 12px;
    border: 2px solid #FFD500;
    margin-top: 15px;
    background: #1a1a2e;
}

.map-placeholder {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #2a2a4e, #1e1e3e);
    border-radius: 12px;
    border: 2px dashed #FFD500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    margin-top: 15px;
}

.map-placeholder span {
    font-size: 3em;
    margin-bottom: 10px;
}

// =============================================
// 🚖 KOODI TAXI — Карта з маршрутом (Урок 6)
// =============================================
// Вивчаємо: iframe, encodeURIComponent, динамічний src

// ─────────────────────────────────────────────
// 📦 КРОК 1: Знайди елементи
// ─────────────────────────────────────────────
// Використай document.getElementById() для:
// - mapFrame (iframe для карти)
// - fromAddress (input звідки)
// - toAddress (input куди)
// - showRoute (кнопка)
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🗺️ КРОК 2: Функція показу маршруту
// ─────────────────────────────────────────────
// Створи функцію showMapRoute() яка:
// 1. Отримує значення з полів fromAddress та toAddress
// 2. Кодує адреси через encodeURIComponent()
// 3. Будує URL для Google Maps з параметрами saddr та daddr
// 4. Оновлює src атрибут iframe
//
// ПРИКЛАД URL:
// https://maps.google.com/maps?saddr=Київ&daddr=Борисполь&output=embed
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🖱️ КРОК 3: Обробник кнопки
// ─────────────────────────────────────────────
// Додай addEventListener на кнопку showRoute
// При кліку викликай функцію showMapRoute()
//
// ⬇️ ПИШИ ТУТ:



console.log('🗺️ Koodi Taxi Map!');

16px

localhost/taxi-map.html

🗺️

Напиши код і натисни Run ▶

Koodi Taxi

🗺️ Урок 6: Карта з маршрутом

🗺️ Бачиш де їде твоє таксі?

Що таке iframe?

🏆 Що ти вивчив:

✅ Коли все працює:

Потрібна допомога?

🎉 Урок 6 Завершено!

🤖 AI-KOODI

💡 Підказка

🗺️ Карта загубилась!