Карта google в якості фону сайту

Одного разу, мені прийшла в голову думка "встановити карту Google в якості фону сайту", мені знадобилася моя удача знаходити власні шляхи розв'язання. Тому я вирішив вдатися до допомоги CSS і використовував z-index / absolute. в загальному, позиціонування елементів.

Поясню покроково, що я зробив.

Крок 1 - Отримав Google Maps API Key:

Ключ отримати було не складно, я просто відвідав відповідну сторінку і створив свій код.

Крок 2 - Налаштування CSS і HTML:

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

Як бачите, для того щоб отримати цей ефект, я задав ID "map_canvas" (який генерує карту Google), вбудований стиль абсолютного позиціонування. Зверху, праворуч, ліворуч, внизу, - всі параметри по нулях, потім і z-індексу прісвоел 0. Необхідно позиціонувати все в BODY. а найостанніший елемент необхідно вставити до закриває тега BODY.

Для інших DIV елементів на сторінці (зворотний відлік, текст і т.д.) я створив контейнер DIV (#countdown_dashboard) і дав йому абсолютне позиціонування і встановив z-index 100 (або вище, головне - не 0).

Очевидно, що це може бути корисно, і це тільки самі основні параметри на карті Google. Google Map API дозволить Вам розміщувати призначені для користувача мітки на карті таким чином, що це може стати в нагоді при створенні сторінки контактів компанії з зазначенням місця розташування офісів і т.д.

Схожі статті