Google Maps: Индивидуальность для сайта – Настрой!

google maps

Как придать Google Maps индивидуальный вид на вашем сайте

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Знаете ли Вы, что можете настроить Google Maps на своем сайте, чтобы придать желаемый внешний вид? Если ответ да, то я должен признать, что Вы действительно хороший разработчик. Но если ответ нет, то не стоит беспокоиться. Сегодня мы узнаем, как это сделать. Если Вы новичок в JavaScript, у меня тоже есть решение для этого. Просто оставайся со мной на некоторое время.

Если Ваш сайт работает на движке WordPress или Вы только думаете о том, чтобы создать для себя, например, личный блог. Тогда Вам будет нужен хороший хостинг. Выбрать один из лучших хостингов для сайта на WordPress можно вот здесь: https://ru.tophosts.net/cms-rating-wordpress.

Теперь продолжим о том, о чем начинали разговаривать сегодня …

Существует миллион причин, по которым Вы должны настроить фрейм Google Maps на своем сайте. Наиболее важным из них будет то, что Вы хотели бы иметь вид рамки Google Maps, которая будет сочетаться с вашим сайтом. Стиль по умолчанию не даст Вам такой опыт. Давайте посмотрим и на другие возможности:

  • Скрыть достопримечательности, чтобы очистить пространство
  • Подсветить дороги на карте
  • Скрыть определенные элементы карты, которые Вам не нужны
  • Измените цвет, чтобы гармонировать с вашим сайтом
  • Сделать это просто, удалив пейзажи

Если Вы не знаете, как добавить Карты Google на свой сайт, сначала ознакомьтесь с этой статьей.

Теперь давайте начнем с примера.

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Приведенный выше фрагмент кода сделает все объекты карты серым, затем раскрасит геометрию артериальной дороги синим цветом и полностью скроет все ландшафты. Все это сделано с помощью JSON.

Теперь Вы можете спросить, что такое featureType, что такое elementType или стайлеры? Ну, featureType выбирает модификацию стиля для функций.

Теперь объектами будут географические характеристики на карте, такие как дороги, парки, пруды и многое другое. ElementType будет составной частью любых объектов, таких как метки или геометрия. ElementType сообщит объекту свое свойство.

Стайлеры – это правило, применяемое к любым выбранным функциям и элементам. Они выбирают цвет, видимость и вес любых функций.

Разве я не говорил, что Вам не нужно никакого кода для настройки вашей карты? Вот как это сделать.

Шаг 1. Посмотрите мастер стилей API Карт Google.

google maps_01

Шаг 2: Настройте плотность «Дороги», «Ориентиры» и «Метки».

google maps_02

Или выберите тему, которая Вам нравится.

google maps_03

Шаг 3: Теперь это простые вещи. Для более продвинутой настройки Вам нужно нажать «Дополнительные параметры».

google maps_04

Шаг 4: Это та часть, где Вы получаете полную свободу проектирования так, как Вам нужно.

Для изменения цвета текста сделайте следующее…

google maps_05

Шаг 5: Если Вы хотите скрыть несколько вещей, Вы можете сделать это (помечено на рисунке ниже.

google maps_06

Шаг 6: Вы также можете контролировать внешний вид дорог.

google maps_07

Шаг 7: Когда Вы получите желаемый стиль, нажмите «Готово».

google maps_08

Шаг 8: После нажатия «Готово». Вы получите подсказку с кодом JSON для этого стиля. Нажмите «Копировать JSON».

google maps_09

Шаг 9: Теперь Вам нужно вставить код JSON в «styles» внутри кода JavaScript

Это будет работать как по волшебству.

Шаг 10: Посмотрите, где я его вставил

google maps_10

Я надеюсь, что у Вас есть четкое понимание. Вы можете взглянуть на мой код, если хотите.

СКАЧАТЬ КОД

Обратите внимание: «YOUR_API_KEY» необходимо заменить ключом Google Maps API. Надеюсь, Вы узнали новый трюк сегодня. И не забудьте поделиться своим опытом в разделе комментариев. Всем удачи и благополучия! До новых встреч! Удачного проектирования :)

Вы будете первым, кто поставит оценку!
Понравилась статья? Поделиться с друзьями:
Добавить комментарий