Доста често, когато създавате сайт, става необходимо да поставите карта върху него, която да показва местоположението на вашата организация. Всъщност картата на сайта е много удобна: на първо място за вашите потребители. Те ще могат веднага, без да напускат вашия ресурс, да видят как могат да ви намерят, какво има наблизо и да определят колко далеч е вашата организация от тяхното местоположение. Не всеки знае как да вмъкне карта на сайта. И е много, много лесно да се направи!
В тази статия ще ви разкажа и покажа как само за няколко минути можете да вмъкнете карта с желаното местоположение на страниците на вашия сайт.
Как да вградите карта в уебсайт
Така че, за да поставим карта на сайта, ще използваме услуга от Google.
1. Първото нещо, което трябва да направим, е да отидем на уебсайта на Google Maps.
2. Сега, за да извършим всички необходими операции, най-добре е да отидем на "Класически интерфейс".
За да направите това, щракнете върху иконата с въпросителен знак в долния десен ъгъл на екрана.
Пред вас ще се отвори малък изтеглящ се панел с менюта, в който трябва да изберете „Класически интерфейс“.
След това ще се появи друг изскачащ прозорец, където ще бъдете помолени да кажете защо искате да използвате класическия интерфейс. Можете да отметнете един от елементите или да не го отметнете, а веднага да кликнете върху синята връзка „Класически интерфейс“ точно отдолу.
След това ще отидете в класическия интерфейс на Google maps, където има всичко необходимо, за да поставим картата на страницата на сайта.
3. Сега в полето за въвеждане на адреса въведете желания адрес. Не забравяйте, че трябва да посочите държавата, града, улицата и къщата, тоест пълния адрес.
В резултат на това ще получите вашето местоположение на картата, маркирано с червен маркер.
4. Сега трябва да получим кода, който да вградим в нашата уеб страница, и също така да зададем някои настройки.
За да получим кода за вграждане, трябва да щракнем върху иконата, за да получим връзка или код (намира се вдясно от иконата на принтера).
5. Тук се интересуваме от HTML кода, който да добавим към уебсайта (второ поле).
Също така в този код можете да видите някои параметри, които могат да бъдат променяни. Това са размерите на картата, т.е. нейната височина и ширина. Можете също да зададете рамка за картата. По подразбиране стойността на рамката е нула, но можете да промените това, като зададете например единица.
Ако трябва, променете тези параметри, въпреки че можете да го направите от кода на уеб страницата. Ако не е необходимо, просто копирайте целия код.
6. Сега остава само да поставите копирания код на мястото на вашата уеб страница, където искате да видите картата.
Можете да създадете отделен блок "div" специално за вашата карта, който след това можете да стилизирате чрез файл със стилова таблица.
Ще залепя картата си тук. Вижте как ще изглежда.
В резултат на това потребителят ще види вашето местоположение, маркирано с маркер. Той ще може да мести картата, да увеличава и намалява.
Също така над маркера ще се покаже кутия с вашия адрес. По-долу има връзка за преглед на картата в по-голям мащаб.
И така, всичко е много просто, функционално и удобно.
Използвайте със здраве!
Ще се радвам, ако този урок е полезен за вас. Като благодарност оставете вашите коментари и споделете статията, като използвате бутоните на социалните медии по-долу.
Също така се абонирайте за актуализации на блогове, ако още не сте абонирани. Обещавам ви много полезни материали.
Анна Котелникова беше с вас.
Успех и до нови срещи.
Карта на местоположението на уебсайта с адреса на организациятае много удобно ръководство. Съгласете се, много е практично да отидете на сайта и да видите местоположението на компанията, без да отваряте допълнителни раздели, за да търсите адреса на картата. Това е допълнителен малък плюс в съкровищницата на лоялността от страна на клиента по отношение на организацията.
Обикновено се поставя карта на страницата за контактина посочените контакти. Вмъква се с помощта на специален програмен код (скрипт). от най-много прости начиниполучаването на такъв скрипт е използвайки готови API решения от Google или Yandex. За да поставите карта в сайта, няма нужда от познания по програмиране, следвайки инструкциите по-долу, ще получите визуална и удобна карта.
Вмъкване на карта с помощта на Yandex Maps
1. В момента (началото на 2013 г.) дизайнерът на карти Yandex е наличен във версия 2.0, което е много удобно и логично разбираемо. Дори не е необходимо да сте оторизиран потребител, за да създадете карта. Първата стъпка е да създадете самата карта с адреса. За да направите това, следвайте връзката http://api.yandex.ru/maps/tools/constructor/ и въведете адреса на компанията в долното поле за въвеждане. След натискане на бутона "намери", системата ще покаже опции за намерените адреси.
2. Поставяме точка на желания адрес и посочваме името на организацията в полето за описание. По-добре е да изберете цвета на точката въз основа на стила на сайта, на който ще бъде разположена картата. Конструкторът също така ви позволява да маркирате други ориентири на картата, като големи известни обекти, да разтегнете картата до желания размер, да начертаете маршрут от автобусна спирка с помощта на инструмента за чертане на линии, да редактирате мащаба.
3. След това отидете на раздела Изглед. Тук можете да изберете дали вашата карта да бъде статична или интерактивна. По-добре е да изберете втората опция, така че потребителят ще може да види близкия район и да навигира.
4. Разделът "Код за вграждане" предлага да прочетете потребителското споразумение. След като го потвърдите, ще получите код за вграждане. Можете да го редактирате малко, например да премахнете връзката към Yandex, да го поставите по-точно, но е по-добре да не правите значителни промени.
5. Копирайте този код и го поставете на страницата с контакти чрез HTML редактора след текста.
6. Запазваме направените промени и проверяваме резултата на страницата на сайта.
Вмъкване на карта с помощта на Google Maps
1. Алгоритъмът на действията е подобен на описания по-горе. Следвайте връзката http://maps.google.ru/maps и въведете адреса на организацията в лентата за търсене. Можете също така да видите как изглежда от сателит. След това, за да получите кода, щракнете върху знака за връзка вляво. Можете да копирате съществуващия код или можете да щракнете върху връзката „конфигуриране и преглед на вградената карта“.
2. Когато е избрано редактиране, ще се отвори допълнителен прозорец, където можете да коригирате неговия размер.
3. Копирайте получения код и го поставете през html редактора на страницата на сайта. Ще изглежда точно както при визуализацията. За разлика от картите на Yandex, Google Mapsвинаги само интерактивен, има по-малко възможности за редактиране на самата карта, но можете да разгледате терена от сателита, релефа с имената на обектите и 3D картата.
За да може даден сайт да се търси в Yandex.Maps, той трябва да бъде регистриран в Yandex.Directory.
За да поставите фрагмент от карта на вашия сайт, трябва да попълните няколко полета в конструктора. Предполагам, че е по-добре да инсталирате код на статична схема на HTML страницата с връзка към Yandex.Maps, тъй като скриптът може да се намеси на устройства с бавен интернет. 
Резултат:
адрес_от_конструктор"alt="(!LANG: Име на фирмата!}"/>Панорамният режим също може да бъде добавен към вашия уебсайт 
Резултат (съдържанието може да се завърти, ако хванете секцията му с мишката, навигирайте по улиците, като щракнете върху стрелките):
Съветвам ви да гледате това видео за вдъхновение:
Добавете карта към сайта: две изображения едно до друго (HTML / CSS)
Можете да поставите изображение на организацията близо до картата. Когато прозорецът на браузъра се намали, изображенията ще намалят пропорционално.
 |
 |
|
Скулптура "Родината-майка зове!" 
От автора:Поздравявам ви приятели! В тази кратка статия ще научим как да вградим карта на Yandex в сайт на WordPress. Въпросът за добавяне на карта към всеки сайт е доста популярен сред потребителите, което не е изненадващо. Всъщност почти всеки сайт има страница за контакти и ако има физически адрес, да речем магазин или студио, тогава е по-лесно и по-добре да го демонстрирате във форма, която е разбираема за посетителя - на карта на Yandex.
Така че, за да добавите карта към сайта, първо трябва да я създадете. Това може да стане с помощта на конструктора на уебсайтове от услугата Yandex. Тази услуга е достъпна на следния адрес - https://tech.yandex.ru/maps/tools/constructor/ .
Както можете да видите, предлага ни се да изберем готова карта или да създадем нова. Моля, имайте предвид, че за да създадете карта, както и да работите с други услуги от Yandex, ви е необходим акаунт в Yandex. Ако го нямате или не сте оторизирани, тогава Yandex ще ви предложи да създадете свой собствен акаунт или да влезете в съществуващ. И така, щракнете върху бутона Създаване нова картаи най-вероятно ще видите карта на града, в който се намирате.
Ако това не е вашият град или просто ви трябва друг град, тогава можем да го променим допълнително, когато търсите желания адрес или обект на картата.
Като пример, нека създадем карта, която ще бъде главната улица на Киев - Khreshchatyk. За да направите това, използвайте лентата за търсене в горната част на картата и въведете адреса, който ни интересува.
В резултат на това търсената улица или точният адрес ще бъде намерен, ако сте го въвели. След това можете да използвате набора от бутони под лентата за търсене, по-специално бутона Етикети, който ви позволява да поставите маркировка върху желания обект на картата.
За етикета можете да зададете текст (описание), да зададете неговия цвят и вид. След това щракнете върху бутона Готово. След това в лявата част на страницата ще намерим бутона Запазете картата и ще получите връзка и щракнете върху нея.
След като запазим, ще видим визуализация на картата, където можете да коригирате размера й, като просто плъзнете плъзгачите отстрани на картата.
Променяйки размера на картата на Yandex, от лявата страна на страницата веднага ще видим параметрите на нейната ширина и височина и това е много удобно. След като завършите промените, щракнете върху бутона Вземете кода на картата.
След натискане на бутона в подсказката, ще видим готовия код на картата, който остава да вмъкнем в желаната WordPress страница.
Вече имам страница за контакти на моя WordPress сайт, тук ще поставя копирания код. Моля, обърнете внимание, че това е HTML код, който свързва скрипта, така че този код трябва да бъде вмъкнат на страницата не във визуален режим, а в текстов режим.
Нека запазим страницата и да видим промените в потребителската област на сайта на WordPress. Както можете да видите, картата на Yandex успешно се появи на сайта на WordPress.
Всичко е изключително просто и целият процес отне само няколко минути. Много удобно е, че можем, ако желаем, да поставим карта на Yandex на всяка страница на сайта на WordPress и дори във всяка част на сайта. Например, можем лесно да генерираме миниатюрна карта и да я вмъкнем в страничната лента. За да направите това, просто използвайте приспособлението Text, което ви позволява да вмъкнете HTML код. Е, това е всичко, което имам. Късмет!
Ако желаете вмъкнете добра картакъм уебсайтас указание за местоположението върху него, например вашия офис, склад, след това използвайте такива добре познати уеб инструменти като карта на сайта от Yandexили карта на сайта от google.
В тази статия ще ви кажем защо и как да вмъкнете карта на Yandex в сайта.
Ето как изглежда например картата на Yandex, която вмъкнахме на уебсайта на търговския център. Може да е по-подробно, с изображения на къщи на диаграмата, но в този случайпо-важно беше да се посочи местоположението на търговския център спрямо най-близките села, така че беше избран малък мащаб.
Защо ви е необходима карта на сайта?
Може да се усмихнете, когато прочетете този на пръв поглед риторичен въпрос. „Картата е там, за да уведоми посетителите къде се намираме“ е прост отговор, твърде лесен за разбиране на ролята на картата, особено за търговски сайт. Ето някои важни аспекти на наличието на карта на сайта:
- Обърнете специално внимание: наличието на карта значително повишава степента на доверие във вашия ресурс. Визуалното показване на местоположението на фирмата, офиса, магазина подсъзнателно освобождава потенциалния клиент (облекчава страховете като: „ами ако бъдат измамени и изчезнат?“), което означава, че увеличава вероятността посетител на сайта да стане ваш истински клиент.
- Наличието на интерактивна карта (за разлика от карта-изображение) позволява на потребителя да се ориентира по-добре в терена, да види най-близкото метро, шофьорите - да проверят маршрута на отдалечените подходи към обекта. В допълнение, интерактивна карта ви позволява да разгледате района от космоса.
- Е, разбира се, необходима е карта на сайта, така че посетителите и клиентите на сайта да знаят местоположението на вашия магазин, офис, склад.
Как да вмъкнете карта на Yandex в сайта (инструкции стъпка по стъпка)
Трябва да се възползвате API конструктор на Yandex.Maps.
В тази статия даваме пример инструкции стъпка по стъпка, което, надяваме се, ще помогне да вмъкнете карта на Yandex на вашия сайт:
Стъпка 1. Първоначална настройка на Yandex карти за сайта:
- Отворете страницата на конструктора на Yandex.Maps за сайта.
- Намерете необходимото географско местоположение на картата, като използвате адреса или ръчно (чрез мащабиране с плъзгача и преместване на картата с мишката).
- Изберете удобен кантар за работа. Крайната скала е най-добре зададена в края на работата. Ще начертаем маркировки на картата, линии (пътища за достъп) и контури на сгради или територии.
- Въведете името на бъдещата карта в съответното поле.
- Да преминем към сервизните инструменти: бутони за чертане на точки (маркировки на картата), линии, полигони (контури) и размери на картата.
Стъпка 2. Начертайте точки (маркировки) на картата:
- Кликнете върху бутона за чертане на точки.
- Поставяме етикет (точка) на мястото, от което се нуждаем. Например на вашата офис сграда. Карта на сайта от Yandex ви позволява да вмъкнете не един, а няколко етикета (например, ако имате няколко магазина, складове или офиси).
- Нека да преминем към настройка на свойствата на инсталирания етикет (вмъкване на текст, избор на цвят и т.н.).
Стъпка 3. Задаване на свойствата на маркера, инсталиран на картата:
- Щракваме директно върху начертания от нас етикет.
- В прозореца, който се отваря, изберете необходимите свойства (цвят, номер на маркировка на картата), напишете текста по желание (по-късно текстът ще бъде видим за потребителя, когато щракне върху маркировката).
- Всеки етикет може да бъде премахнат в съответния прозорец със свойства.
- Така че вмъкнахме етикет за вашия офис на картата на Yandex за сайта, настроихме свойствата му и сега преминаваме към чертане на линии. Например линиите на алеята към офиса.
Стъпка 4. Начертайте линии на картата:
- Кликнете върху бутона за чертане на линия.
- Щраквайки върху картата, получаваме прекъсната линия на всяка траектория. Може да очертае всеки обект или да начертае маршрут за подход към обекта.
- Като преместите квадратния и кръглия маркер, можете да редактирате формата на линията.
- По аналогия с етикетите, ако щракнете върху линията, ще се появи прозорец със свойства, в който можете да зададете цвета, дебелината, прозрачността на линията, както и да въведете текст, който да се показва на потребителя.
- Сега се обръщаме към рисуването на полигони.
Стъпка 5. Рисуване на полигони, запълнени с цвят на контура:
- Кликнете върху бутона за рисуване на полигони.
- За разлика от линиите, които също могат да се използват за очертаване на всеки многоъгълник, тези многоъгълници са контури със запълнена с цвят среда.
- Като щракнете върху картата, можете да нарисувате всеки запълнен многоъгълник. Техниката за рисуване, редактиране и настройка на свойства е подобна на техниката за чертане на линии.
- Сега нека да преминем към преоразмеряване на картата.
Стъпка 6. Преоразмеряване на картата за сайта:
- Кликнете върху бутона за преоразмеряване.
- Като преместите квадратните маркери по очертанията на картата, можете да промените размера до желания размер. Всичко е просто.
- Нека да преминем към окончателното създаване на карта.
Стъпка 7. Получаване на кода на картата за сайта (Yandex):
- Придаваме окончателния вид на картата, като задаваме окончателния мащаб на картата и крайната позиция (координати).
- На този етап създаването на карта за сайта (Yandex) може да се счита за завършено. Кликнете върху големия жълт бутон „Запазване и получаване на код“.
- Дори след като запазите картата, винаги можете да се върнете към редактиране.
- Моля, имайте предвид, че картата може да бъде не само диаграма, но и снимка от космоса, хибрид или елемент от „Картата на хората“.
- Освен това можете свободно да направите картата интерактивна или просто изображение. Интерактивната карта е по-интересна, по-функционална, но може да отнеме повече време за зареждане от обикновено изображение. Изборът е твой.
- Можете да вмъкнете карта на Yandex в сайта, като поставите html кода на картата на желаното място на страницата.
Благодарим на всички читатели, които се интересуват от нашите инструкции стъпка по стъпка.
Създаването на карта за сайт от Yandex е лесно действие, което не изисква специални знания и умения на фона на много по-сложни проблеми при изграждането на сайтове. Ако срещнете по-сериозни затруднения при създаването на вашия сайт, моля свържете се с нас. Ще се постараем да разрешим вашите проблеми!
Ако нашата инструкция ви е харесала, можете да я препоръчате на вашите приятели и познати. „Социалните бутони“ са вдясно. Това е нашата малка печалба.