Як додати власну карту Google на веб-сайт

1. Додавання спеціальної карти Google до вашої теми WordPress
2. Додайте спеціальний анімований маркер на свою карту Google

Якщо ви створили веб-сайт, є досить хороший шанс, що ви використовували Карту Google, оскільки вони досить прості у використанні та корисні для кінцевого користувача. Скопіювати вбудований код Google Map і вставити його на свій веб-сайт так просто, як яблучний пиріг. Якщо ви використовуєте WordPress, ви також можете включити карту Google із плагіном.

Але що робити, якщо ви хочете трохи більше налаштувати? Ось як можна самостійно включити карту за допомогою API Карт Google.

Спочатку невелике уточнення. Існує не один API Google Maps, а скоріше колекція API Google Maps. Ми говоримо про додавання карти на веб-сайт, тому ми будемо використовувати API JavaScript Google Maps.

Гаразд, почнемо.

Скажімо, ви працюєте над основним файлом HTML або php. Ми створимо порожній елемент div у цьому файлі, щоб зберігати карту та надавати їй ідентифікатор, як-от "map".

<div id = "map"> </div>

У своєму CSS вам потрібно буде надати діву висоту. Наприклад, якщо ви дали своєму діві ідентифікатор "map", ви напишете:

# карта {висота: 600 пікселів;}

Звичайно, ви захочете замінити 600 пікс на будь-яку висоту, яка найкраще відповідає вашим потребам. Ви також можете зробити те ж саме для ширини, знову ж таки, залежно від ваших потреб та вашого плану.

Документація API Google Maps пропонує також додати висоту до тегів HTML та body, щоб гарантувати, що будь-які успадковані диви не мають розмір 0 x 0 пікселів. Вам, можливо, не потрібно робити це залежно від стилю чи теми вашого веб-сайту, але добре пам’ятати про всяк випадок.

html, корпус {зріст: 100%; маржа: 0; підкладка: 0; }

Перш ніж робити щось інше, нам потрібно буде підключитися до Javascript API Google Maps. Для цього ми скинемо цей скрипт перед тим, як закрити тег нашого документа.

<script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer> </script>

Примітка. Хоча API JavaScript Google Maps зараз працюватиме без ключа API, документація рекомендує його. Ви можете придбати ключ, відвідавши Документація API API Google Maps і дотримуючись інструкцій, щоб отримати ключ. Це безкоштовно і займає всього кілька хвилин.

Звичайно, якщо ви використовуєте ключ API, вам потрібно замінити YOUR_API_KEY на ваш фактичний ключ API. Якщо ви вирішите не використовувати його, ви можете вилучити розділ ключ = YOUR_API_KEY зі скрипту, і він прочитає:

<script src = "https://maps.googleapis.com/maps/api/js?&callback=initMap" async defer> </script>

Зверніть увагу на "зворотний виклик = initMap" в кінці URL-адреси. Ця функція зворотного виклику запустить функцію initMap у нашому коді Javascript, який ми скоро запишемо.

Для цього прикладу ми розмістимо наш спеціальний код Google Map в окремому файлі Javascript під назвою map.js. Трохи над сценарієм API Карт Google у вашому HTML-файлі додайте посилання на файл Javascript. Обов’язково замініть значення атрибуту src на розташування власного файлу.

<script type = 'text / javascript' src = 'js / map.js'> </script>

Тепер ми зашифруємо дуже основну карту в JavaScript. По-перше, створіть змінну для карти та функцію під назвою initMap (), яку потрібно запустити, коли ми ініціалізуємо карту (пам'ятайте, що callback = initMap з нашого сценарію API Google? Це те, що функція initMap вона буде запущена).

Примітка. Збереження нового об’єкта карти у змінній на даний момент не є строго необхідним, але ми будемо використовувати його пізніше для деяких додаткових функцій, тому ми просто створимо його зараз.

Коли функція initMap запускається, ми створюємо новий об’єкт карти. Ви можете бачити, що ми використовуємо метод getElementById для позначення раніше створеного діла з ідентифікатором "map". Якщо ви вирішили назвати свій ідентифікатор чимось іншим, ніж «map», ви захочете замінити «map» на будь-який ідентифікатор, який ви використовували.

вар карта; функція initMap () {map = new google.maps.Map (document.getElementById ('map'), {центр: {лат: 40.0519752, lng: -76.314270999999}, масштабування: 15 // типово зазвичай 8 або 9}) ; } // завершити функцію initMap

API Карт Google має багато варіантів, але потрібні лише центр та масштабування.

Рівні масштабу варіюються між 0 (що є повним видом на землю) і 20 (це будівельний рівень). Типовий масштаб на карті Google зазвичай становить близько 8 або 9. Я вибрав масштаб 15 для цього прикладу, щоб показати карту з трохи детальніше.

Для центру потрібно встановити широту та довготу. Отже, як ви знайдете цю інформацію? Перейдіть до Карт Google, клацніть правою кнопкою миші на карті, яке ви хочете бути центром вашої карти, та виберіть "Що тут?"

У нижній частині карти з’явиться невелика картка, і ви побачите широту та довготу, вказані внизу. Ви можете використовувати ці налаштування для свого центру.

Тепер, якщо ми включили наш файл Javascript, додали необхідний CSS, підключились до API Карт Google, помістили тег div з id = "map" і зробили все правильно, ми повинні бачити, що наша карта Google відображається на нашому сайті .

Досить круто, але те, що ми маємо, є досить базовим. Що робити, якщо ми хочемо додати ще кілька налаштувань? Давайте розглянемо деякі додаткові варіанти.

scrollwheel - одне, що мені дратує - прокручування сторінки на веб-сайті, натрапивши на карту Google, і раптом карта починає масштабуватися, і сторінка перестає прокручуватися. Ви можете запобігти такій поведінці, встановивши колесо прокрутки: false на об’єкті карти. (Правда це за замовчуванням). І не хвилюйтеся, ви все одно зможете збільшувати та зменшувати масштаб за допомогою регулювання масштабу.

zoomControl - це кнопки (+) та (-), включені за замовчуванням, які дозволяють збільшувати та зменшувати масштаб. Встановіть ZoomControl на значення false, щоб видалити їх.

zoomControlOptions - за замовчуванням елементи керування масштабуванням відображаються в правому нижньому куті карти. Ви можете змінити положення в будь-який з інших кутів або розмістити його по центру з будь-якої сторони. Наприклад, додавання цього коду буде вертикально центрувати елементи керування вздовж лівої частини карти.

zoomControlOptions: {position: google.maps.ControlPosition.LEFT_CENTER}

Про всі контролі позицій див. Документацію:

https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning

streetViewControl - увімкнено за замовчуванням у нижній правій частині карти, цей елемент керування - «Піктограма Pegman» (як називає Google), яку користувачі можуть перетягнути на карту, щоб побачити вигляд вулиці. Щоб видалити його, встановіть параметр на значення false.

Аналогічно регулюванню масштабування, положення цього елемента управління можна переміщувати, використовуючи те саме управління керуванням. Код нижче розмістить його вгорі зліва.

streetViewControlOptions: {позиція: google.maps.ControlPosition.LEFT_TOP}

fullscreenControl - це функція, яка за умовчанням відключена. Використовуйте повний екранControl: true, щоб увімкнути його. Як ви могли очікувати, він дає вам контроль, щоб дозволити користувачу перевести карту в режим повноекранного режиму.

Тепер, якщо ви складете все це разом, так виглядатиме наш файл Javascript з нашою функцією initMap.

вар карта; функція initMap () {map = new google.maps.Map (document.getElementById ('map'), {center: {lat: 40.0519752, lng: -76.314270999999}, // lat / long від центру масштабування карти: 15, // 8 або 9 є типовим прокручувальним колесом масштабування: хибним, // запобігає прокрутці миші для збільшення масштабу карти. MapTypeControl: true, // map defaultTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, позиція: google.maps.ControlPosition.BOTTOM_ }, zoomControl: true, // типово zoomControlOptions: {позиція: google.maps.ControlPosition.LEFT_CENTER}, streetViewControl: true, // default streetViewControlOptions: {position: google.maps.ControlPosition.LEFT_TOP}, fullscreenControl }

Якщо все гаразд, у нас повинна бути карта Google, на якій на веб-сайті відображатиметься контроль позиції, налаштований за допомогою API Javascript Google Maps. У нас є елементи управління у вигляді горизонтальної смуги, що відображається в нижньому центрі, контроль масштабування переміщено в лівий центр, керування переглядом вулиці переміщено вліво вгорі, а керований екран увімкнено (показано вгорі праворуч).

Додавання спеціальної карти Google до вашої теми WordPress

Основна відмінність тут полягає в тому, як ми будемо завантажувати наші файли Javascript, і куди ми помістимо наш <div id = "map"> </div> код. Ви можете помістити тег #map div у файл шаблону, кодувати його у sidebar.php або навіть у редакторі вмісту сторінки чи публікації.

Що стосується файлів сценаріїв, а не вставляти їх у верхній або нижній колонтитул нашої теми, ми завантажимо їх за допомогою функції wp_enqueue_script у нашому файлі function.php.

Інша проблема, яку ми будемо вирішувати по ходу, - це завантаження цих файлів Javascript лише на сторінку або сторінки з картою.

Ми знову використаємо файл з назвою map.js та код з попереднього прикладу для створення нашої карти.

вар карта; функція initMap () {map = new google.maps.Map (document.getElementById ('map'), {center: {lat: 40.0519752, lng: -76.314270999999}, // lat / long від центру масштабування карти: 15, // 8 або 9 є типовим прокручувальним колесом масштабування: хибним, // запобігає прокрутці миші для збільшення масштабу карти. MapTypeControl: true, // map defaultTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, позиція: google.maps.ControlPosition.BOTTOM_ }, zoomControl: true, // типово zoomControlOptions: {позиція: google.maps.ControlPosition.LEFT_CENTER}, streetViewControl: true, // default streetViewControlOptions: {position: google.maps.ControlPosition.LEFT_TOP}, fullscreenControl }

Тепер давайте підберемо наші файли. нам потрібно завантажити наш файл map.js, а також файл API Карт Google. Приведений нижче файл API Карт Google не містить ключ API. Якщо ви використовуєте його, він буде в такому форматі:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initКарта

І знову, ви захочете замінити YOUR_API_Key ключем API, отриманим від Google.

Файл function.php вашої теми, ймовірно, вже містить гак wp_enqueue_scripts, який завантажує будь-які сценарії та стилі. Якщо так, ви можете залишити вам сценарії внизу цієї функції. Якщо ні, ви можете створити свою власну функцію та "додати" гачок.

функція my_theme_load_scripts () {wp_enqueue_script ('карта', get_template_directory_uri (). '/js/map.js'); wp_enqueue_script ("googlemapsapi", "https://maps.googleapis.com/maps/api/js?&callback=initMap"); } Додати запуск ('wp_enqueue_scripts', 'my_theme_load_scripts');

Скажімо, ми хочемо завантажувати ці файли лише на одну сторінку на вашому сайті WordPress. Ми будемо використовувати простий умовний характер, щоб запобігти завантаженню цих скриптів на кожну сторінку. Припустимо, наша карта знаходиться на сторінці, що називається "контактною". Ми будемо використовувати умовний переказ WordPress is_page () і передамо ім'я сторінки.

функція my_theme_load_scripts () {if (is_page ('contact')) {wp_enqueue_script ('карта', get_template_directory_uri (). '/js/map.js'); wp_enqueue_script ("googlemapsapi", "https://maps.googleapis.com/maps/api/js?&callback=initMap"); }} додати запуск ('wp_enqueue_scripts', 'my_theme_load_scripts');

Тепер у нас повинна бути завантажена наша карта на нашій сторінці контактів, а файли Javascript повинні завантажуватися лише на контактній сторінці, а не на кожній сторінці вашого сайту WordPress.

Додайте спеціальний анімований маркер на свою карту Google

У попередніх двох розділах ми показали, як створити користувальницьку карту для свого веб-сайту за допомогою API Javascript Google Maps і як додати її до теми WordPress за допомогою шаблонів тем та функцій.php. Тепер ми збираємось додати до карти солодкий анімований маркер.

Можливо, ви бачили такий ефект раніше на інших Картах Google. "Штифт" падає вниз і висаджується на потрібне місце карти. Ми зробимо те ж саме, але з доданим поворотом власного образу.

Отже, якщо ви слідуєте далі, ви можете розпізнати цей код Javascript, який ми створили:

вар карта; функція initMap () {map = new google.maps.Map (document.getElementById ('map'), {center: {lat: 40.0519752, lng: -76.314270999999}, // lat / long від центру масштабування карти: 15, // 8 або 9 є типовим прокручувальним колесом масштабування: хибним, // запобігає прокрутці миші для збільшення масштабу карти. MapTypeControl: true, // map defaultTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, позиція: google.maps.ControlPosition.BOTTOM_ }, zoomControl: true, // типово zoomControlOptions: {позиція: google.maps.ControlPosition.LEFT_CENTER}, streetViewControl: true, // default streetViewControlOptions: {position: google.maps.ControlPosition.LEFT_TOP}, fullscreenControl }

Ця функція initMap створює наш об’єкт карти і додає до елементів управління трохи просте налаштування. Він відображається на сторінці в елементі з атрибутом id, встановленим на "map".

Внизу нашої функції initMap ми створимо маркерний об’єкт та додамо наші спеціальні параметри.

var marker = new google.maps.Marker ({position: {lat: 40.0519752, lng: -76.314270999999}, // lat / long of marker map: map, animation: google.maps.Animation.DROP, // краплі маркера в від верхнього заголовка: 'MIND Deveopment and Design', // заголовок на курсорі миші на значку маркера: {url: 'http: //YOURWEBSITE/wp-content/themes/YOURTHEME/img/mind-map-marker.png', масштабувати : новий google.maps.Size (75, 120)}});

Отже, що тут відбувається? По-перше, ми створюємо наш об’єкт маркера карти і зберігаємо його як змінну під назвою "маркер". Як і коли ми створювали об’єкт карти, нам не потрібно суворо зберігати його до змінної на цьому етапі, щоб вона працювала, але ми зробимо це зараз, як це стане в нагоді пізніше.

Для позиції ми використовуємо ту саму широту та довготу, яку ми використовували для центру об’єкта карти.

Для параметра "Карта" ми хочемо звернутися до створеної нами картки, тому встановимо її до тієї змінної "карта", яку ми створили при створенні об'єкта карти.

Тепер для веселощів ... анімації. Якщо ми зупинимось зараз, у нас на карті буде гарний маркер, але прохолодного руху не буде. Отже, ми встановимо параметр анімації на google.maps.Animation.DROP. Це "скидає" маркер у верхню частину карти, коли він завантажений.

В даний час єдиним іншим підтримуваним варіантом анімації є BOUNCE, який робить маркер неодноразово 'скакати', як пого палицю.

Також ми додали варіант заголовка. Це дозволяє вказати текст, який відображатиметься при наведенні на маркер, наприклад, назва вашої компанії.

Нарешті, ми додаємо значок спеціального маркера. Тут ви можете по-справжньому проявити творчість і вибрати власний власний образ як маркер. Тут ви встановлюєте URL-адресу на розташування файлу зображення, який ви хочете використовувати. Якщо вам потрібно масштабувати зображення, використовуйте параметр масштабування розміру та передайте йому масштабовану ширину та висоту зображення в пікселях. Якщо розмір зображення добре, просто пропустіть цю опцію.

Отже, коли все закінчиться, наш код буде виглядати так:

вар карта; функція initMap () {map = new google.maps.Map (document.getElementById ('map'), {center: {lat: 40.0519752, lng: -76.314270999999}, // lat / long від центру масштабування карти: 15, // 8 або 9 є типовим прокручувальним колесом масштабування: хибним, // запобігає прокрутці миші для збільшення масштабу карти. MapTypeControl: true, // map defaultTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, позиція: google.maps.ControlPosition.BOTTOM_ }, zoomControl: true, // типово zoomControlOptions: {позиція: google.maps.ControlPosition.LEFT_CENTER}, streetViewControl: true, // default streetViewControlOptions: {position: google.maps.ControlPosition.LEFT_TOP}, fullscreenControl var marker = new google.maps.Marker ({position: {lat: 40.0519752, lng: -76.314270999999}, // lat / long of marker map: map, animation: google.maps.Animation.DROP, // краплі маркера в від верхнього заголовка: 'MIND Deveopment and Design', // заголовок на курсорі миші на значку маркера: {url: 'http: //YOURWEBSITE/wp-content/themes/YOURTHEME/img/mind-map-marker.png', масштабувати : новий google.maps.Size (75, 120)}}); }

Тепер у нас повинна бути карта зі спеціальним маркером, який випадає зверху, коли карта завантажується.

Дивіться ручку mVaMEE Ендрю Геман ( @AndrewGehman ) на CodePen .