Вбудуйте в свій веб-сайт готові карти від google
Плани і карти часто розміщуються на сайтах компаній з метою допомогти клієнтам дістатися до установи. І Карти Google можуть стати відмінним помічником. Ну хіба не чудово буде додати до карти ще й логотип компанії, вказати місце стоянки, ж / д вокзали і т.д. Та так, щоб знайти вас не представляло ні найменшої труднощі. Насправді це дуже просто зробити, і в цьому уроці я розповім вам як.
o Google Maps API
o Отримуємо координати
o вбудовувати карту в ваш сайт
o Додаємо маркери
o Налаштування маркерів
o Додаємо інформаційні блоки
Це координати Центрального управління компанії Apple в Купертіно
Вбудовуємо карту в ваш сайт
У коді після заслання йде властивість sensor = false. Так як нам не потрібні сенсори, GPS і немає необхідності визначати чиюсь місцезнаходження.
Під кодом, який ми тільки що вставили, введіть наступне:
Давайте трохи розберемося з кодом. У другому рядку задаємо функцію initialize (). У ній ми і поставимо основні настройки нашої карти. У третьому рядку вводимо змінну latlng. latlng означає географічні широти і довготи. Мінлива містить координати, які будемо використовувати як центр нашої карти.
Потім вводиться змінна settings, що містить великий список параметрів:
- zoom задає, як ви, напевно, вже дога, на скільки буде збільшена карта.
- center задає центральну точку.
Прописуючи latlng, ми посилаємося на координати вже прописані в цій змінній.
Наступні параметри коду кілька мінімалізіруєтся розмітку карти. Кнопки управління у верхньому правому куті (Карта, Супутник, Ландшафт) замінюються на спадаюче меню, і кнопки задають масштаб замінюються на маленькі важелі.
mapTypeId: google.maps.MapTypeId.ROADMAP визначає тип нашої карти, це буде дорожня карта, але ви легко можете змінити тип на SATELLITE (супутникова карта), HYBRID (карта-гібрид) або TERRAIN (ландшафтна карта).
Далі пишемо наступне:
У ньому вводимо змінну map, вона визначає, що наша карта буде використовувати всі поставлені вище настройки.
і закриваємо функцію, перейдемо до створення тіла сторінки:
Таким чином ми змушуємо наш сайт при завантаженні активізувати функцію initialize () і задаємо в тезі
Пора додати деяку розмітку. Давайте почнемо з створення стандартного маркера:
Отже, розберемося з кодом.
Спочатку ми задали змінну companyPos, за допомогою якої встановлюють місце маркера. Далі, ми створили сам маркер за допомогою змінної companyMarker. Ви можете звичайно вписати ще ряд параметрів, а з тими, які ми вже вказали, я думаю все ясно.
Хоча того, що ми вже зробили, цілком достатньо і ваш клієнт легко вас знайде, ми можемо нашу карту злегка прикрасити. Створіть в Photoshop зображення розміром 100 × 50 пікселів подібне до цього:
Далі створимо у нашого зображення тінь
Тепер замінюємо стандартний маркер цими зображеннями, відповідно змінюємо і код:
Даний код теж досить простий. Мінлива companyLogo вказує на назву нашого логотипу, задає його розмір, шлях до нього і координати розташування кінчика логотипу (тобто те місце, в якому наш логотип стосується карти). Потім ті ж самі параметри налаштовуємо і для зображення тіні за допомогою змінної companyShadow. І нарешті за допомогою змінної companyMarker ми виводимо зображення і його тінь на карту.
Щоб додати ще маркери, скористайтеся тим же способом, тільки не забудьте змінити назви змінних.
Якщо вам потрібно розташувати кілька маркерів дуже близько один до одного, скористайтеся z-індексом. Маркер з найвищим значенням z-індексу будуть завжди зверху:
Параметр z-index дозволяє вам вибрати який маркер буде поверх всіх
Додаємо інформаційні блоки
Ви можете ввести опис компанії за допомогою інформаційного блоку, що з'являється при натисканні на логотип. Завдяки Google Maps API це зробити простіше простого.
Клацання на логотип вашої компанії буде активізувати інформаційний блок.
Вставте даний код відразу під змінної map:
І цей код теж незвичайно простий. Ось тут є простір для ваших ідей, так як в інформаційному блоці можна розташувати не тільки назва і пару трійку параграфів, а й зображення. А щоб опис з'являлося по кліку на логотип, впишіть цей код відразу після закриває> функції initialize ():
Гарна і чиста трохи ваш блок, додавши стилів в ваш stylesheet-файл:
От і все! Тепер ви зможете вбудувати Google карту в будь-який проект.
Всі вже розібрався, тепер можу скільки завгодно міток поставити на сторінку. Якщо чо кому потрібно допомога не соромтеся звертайтеся. Всім удачі.
привіт, а у мене при запуску HTML все працює, але після вставки коду в сайт - карта відображається, але маркери немає, підкажіть у чому може бути причина? адже шлях до картинок повинен бути вказаний вірно. може ти знаєш в чому справа?
Круто. Струм як зробити 3 карти?
Чи можна вставляти картки гугл в кожен пост? Якщо так, то де прописувати координати, тому що в кожному пості повинні бути свої координати? І чи буде така кількість карт на блозі негативно впливати на позицію у видачі, на просування?
Як визначити точні координати, наприклад, Парижа?
при запуску HTML все працює, але після вставки коду в сайт - карта відображається, але маркери немає, підкажіть у чому може бути причина? адже шлях до картинок повинен бути вказаний вірно.
Хороший урок. От би ще також просто було обьясню як вбудувати на свій сайт сервіс розрахунку відстаней за допомогою api google. Користувач вводить початковий і кінцевий місто і йому показується карта з прокладеним маршрутом і виводиться інформації про відстані між цими містами.
Google не завжди зручний. От якби взяти свою карту і викласти на свій сайт аля google maps було б здорово! Але як?
не можу зрозуміти, як додати другий опис до іншого значку і так далі
Доброго дня. Скористався Вашим уроком. Все працює. Підкажіть, який прописати код, що б зробити карту чорно-білої? Дякуємо.
Дякую за урок
Penetrator
Урок прекрасний, але взагалі-то на сьогоднішній день досить відомий. А ось у мене "хворий" питання, на який ніде не можу знайти відповідь - як поставити на супутниковій карті Google Maps стереографічна проекція (або якось ще?), Щоб відобразити район Північного Полюса?
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!