Картите са съществен аспект на всеки бизнес уебсайт. Дори и да сте изцяло базирани в Интернет, клиентите все още обичат да знаят кой сте и къде живеете. Google Maps вече е по подразбиране за много уебсайтове, тъй като е най-лесният за използване, на пръв поглед най-точен и безплатен. В края на този урок ще знаете как точно да вградите отзивчива карта на Google във вашия уебсайт.
Google Maps по подразбиране не винаги са отзивчиви, така че може да не мащабират до различни размери на екрана. В зависимост от това дали използвате WordPress плъгин или сами го вграждате с код, може да се наложи да добавите няколко реда CSS, за да направите картата отзивчива.
Отзивчив уеб дизайн
Тук отзивчивият е ключов термин. Той описва уеб дизайн, който отчита потребителското изживяване и устройството, за да се гарантира, че е същото, независимо от това какво устройство използвате за достъп до уебсайта. Например отзивчивият уебсайт трябва да осигури същото качество на преживяване, независимо дали го посещавате на десктоп, таблет или смартфон.
За да направи това, уебсайтът трябва да се адаптира към различни резолюции, размери на екрана и да се докосне.
Вграждане на отзивчива карта на Google в уебсайт
Има три начина, по които знам как да вграждам Google Maps в уебсайт. Ако използвате тема на WordPress, тя може да има вградената функция. Можете също да използвате плъгин или да вградите код директно от Google във всеки уебсайт. Първата и втората опция са чудесни за потребителите на WordPress, други CMS също използват плъгини, така че да сте покрити там. Последната опция, използвайки код, трябва да работи на повечето уебсайтове, независимо от това как са изградени.
Използвайте тема на WordPress, за да вградите отзивчива карта на Google
Някои теми на WordPress ще имат функция специално за Google Maps. Тъй като картите са толкова фундаментални за съвременните уебсайтове, някои дизайнери на теми са ги внедрили директно в своите проекти. Ако темата ви има функция за карта, вероятно ще ви трябва API на Google Maps, за да работи. Добавяте API в опциите за тема и той ще говори директно с Google, за да изгради картата при всяко посещение.
- Посетете тази страница на уебсайта на Google, за да започнете процеса на API.
- Изберете синия бутон Първи стъпки.
- Изберете иконата на триредово меню в горния ляв ъгъл на новия екран.
- Изберете APIs & Services и след това Удостоверения.
- Изберете Create Credentials и след това API Key.
- Изберете Ограничи ключ и изберете HTTP Referrers.
- Изберете Запазване.
- Копирайте API ключа и го поставете в страницата с опции за дизайн, която го изисква.
След като имате ключ за API, можете да внедрите Google Map във вашия уебсайт с помощта на инструментите за дизайн на теми. Докато темата е отзивчива, картата трябва да бъде също.
Използвайте приставка, за да вградите отзивчива карта на Google
WordPress използва плъгини, Joomla използва разширения, Drupal използва модули или плъгини, а други CMS използват подобни конвенции за именуване. Така или иначе, плъгините се отнасят до модулни елементи, които можете да привържете към основния си CMS, за да добавите функции. Една полезна функция е Google Map. Ако темата на уебсайта Ви не включва елемент от карти и не искате да правите кода сами, плъгин е следващото най-добро нещо.
- В WordPress отворете Плъгини и Добавяне на нови.
- Потърсете Google Maps и изберете приставка, която харесвате външния вид.
- Активирайте го в Plugins и отидете на неговите Настройки.
- Добавете API на Google Maps, който сте създали по-горе, където е указано, и Запазете.
- Приложете приставката, където искате да се показва картата.
Другите CMS се различават леко по своето наименование и позиции в менюто, но принципът е почти същия. Повечето, ако не всички, приставки за карти ще изискват API на Google Maps да работи.
Използвайте код, за да вградите отзивчива карта на Google
Ако не използвате WordPress или друга CMS, все още можете да вградите отзивчива карта на Google. Просто трябва да използвате код вместо модул. Това отнема малко повече работа, но ще достави същите отзивчиви карти.
- Посетете Google Maps и навигирайте, докато картата, която искате да покажете, изпълни екрана.
- Изберете синята връзка Share и копирайте кода от Embed Map.
- Добавете вашия специфичен вграден код към кода по-долу между и.
- Добавете кода в HTML на вашата уеб страница, където искате да видите картата.
- Запазете промените си.
Кодът:
Това не е моят код, намерих го онлайн, но го тествах на моя уебсайт. Тя работи като чар и би трябвало да работи независимо дали използвате CMS, HTML, Hugo или някой от многото други езици на уебсайтове или инструменти за страници.
