Встройте в свой веб-сайт готовые карты от Google

Планы и карты часто размещаются на сайтах компаний с целью помочь клиентам добраться до учреждения. И Карты Google могут стать отличным помощником. Ну разве не чудесно будет добавить к карте еще и логотип компании, указать место стоянки, ж/д вокзалы и т.д. Да так, чтобы найти вас не представляло ни малейшей трудности. На самом деле это очень просто сделать, и в этом уроке я расскажу вам как.

Обзор урока

o Google Maps API o Получаем координаты o Встраиваем карту в ваш сайт o Добавляем маркеры o Настройка маркеров o Добавляем информационные блоки

Google Maps API

Google Maps API позволяет встраивать карты прямо в страницы вашего сайта. Для чего вам потребуется немного JavaScript, а для создания красивого оформления — немного CSS. Только что выпущена Google Maps API версия 3 и мы именно ее возьмем за основу. Вы можете ознакомиться со всей документацией на Google Labs, и пока будете просматривать информацию обязательно получите ключ к API Карт.

Получаем координаты

Полагаю, что вы, врядли, знаете точные координаты расположения вашей фирмы, поэтому объясню вам очень простой способ для их получения, который предлагает Google. Зная точный адрес вы можете вписать его в URL-адрес следующим образом:

Вписав его подобным образом в адресную строку, вы получите следующие данные:

Это координаты Центрального управления компании Apple в Купертино

Первое число - это константа, и 200 означает, что операция прошла успешно. Второе число указывает на сколько точно указывается адрес, в данном случае 8 говорит о довольно высокой точности. Два последних значения - это широта и долгота, именно они нам и нужны.

Встраиваем карту в ваш сайт

Теперь давайте, наконец, добавим карту на сайт! Откройте любимый HTML -редактор и создайте стандартный HTML-файл с кодировкой UTF-8. Сперва создадим центр проекции (точку фотографирования) и укажем в нашем HTML-файле путь на JavaScript, находящийся на сайте Google Code. Заключите следующие строчки между тегами <head> и </head>:

В коде после ссылки идет свойство sensor=false. Так как нам не нужны сенсоры, GPS и нет необходимости определять чье-либо местонахождение.

Под кодом, который мы только что вставили, введите следующее:

Давайте немного разберемся с кодом. Во второй строке задаем функцию initialize(). В ней мы и зададим основные настройки нашей карты. В третьей строке вводим переменную latlng. latlng означает географические широту и долготу. Переменная содержит координаты, которые будем использовать как центр нашей карты. Затем вводится переменная settings, содержащая большой список параметров:

- zoom задает, как вы, наверное, уже догались, на сколько будет увеличена карта. - center задает центральную точку.

Прописывая latlng, мы ссылаемся на координаты уже прописанные в этой переменной.

Следующие параметры кода несколько минимализируют разметку карты. Кнопки управления в верхнем правом углу (Карта, Спутник, Ландшафт) заменяются на ниспадающее меню, и кнопки задающие масштаб заменяются на маленькие рычажки.

mapTypeId: google.maps.MapTypeId.ROADMAP определяет тип нашей карты, это будет дорожная карта, но вы легко можете сменить тип на SATELLITE (спутниковая карта), HYBRID (карта-гибрид) или TERRAIN (ландшафтная карта).

Далее пишем следующее:

В нем вводим переменную map, она определяет, что наша карта будет использовать все заданные выше настройки.

и закрываем функцию, перейдем к созданию тела страницы:

Таким образом мы заставляем наш сайт при загрузке активизировать функцию initialize() и задаем в теге <div> размер для нашей карты.

Добавляем маркеры

Пора добавить некоторую разметку. Давайте начнем с создания стандартного маркера:

Итак, разберемся с кодом.

Сначала мы задали переменную companyPos, с помощью которой устанавливают расположение маркера. Далее, мы создали сам маркер посредством переменной companyMarker. Вы можете конечно вписать еще ряд параметров, а с теми, которые мы уже указали, я думаю все ясно.

Хотя того, что мы уже сделали, вполне достаточно и ваш клиент легко вас найдет, мы можем нашу карту слегка приукрасить. Создайте в Photoshop изображение размером 100×50 пикселей подобное этому:

Далее создадим у нашего изображения тень

Теперь заменяем стандартный маркер этими изображениями, соответственно изменяем и код:

Данный код тоже довольно простой. Переменная companyLogo указывает на название нашего логотипа, задает его размер, путь к нему и координаты расположения кончика логотипа (то есть то место, в котором наш логотип касается карты). Затем те же самые параметры настраиваем и для изображения тени с помощью переменной companyShadow. И наконец посредством переменной companyMarker мы выводим изображение и его тень на карту.

Чтобы добавить еще маркеры, воспользуйтесь тем же способом, только не забудьте сменить названия переменных.

Если вам нужно расположить несколько маркеров очень близко друг к другу, воспользуйтесь z-индексом. Маркер с самым высоким значением z-индекса будут всегда сверху:

Параметр z-index позволяет вам выбрать какой маркер будет поверх всех

Добавляем информационные блоки

Вы можете ввести описание компании с помощью информационного блока, появляющегося при нажатии на логотип. Благодаря Google Maps API это сделать проще простого.

Щелчок на логотип вашей компании будет активизировать информационный блок.

Вставьте данный код сразу под переменной map:

И этот код тоже необыкновенно прост. Вот здесь есть простор для ваших идей, так как в информационном блоке можно расположить не только название и пару тройку параграфов, но и изображения. А чтобы описание появлялось по щелчку на логотип, впишите этот код сразу после закрывающей >функции initialize():

Приукрасьте немного ваш блок, добавив стилей в ваш stylesheet-файл:

Вот и все! Теперь вы сможете встроить Google карту в любой проект.

Данный урок подготовлен для вас командой сайта ruseller.com Источник урока: www.stiern.com Перевел: Максим Шкурупий Урок создан: 28 Октября 2009 Просмотров: 101316 Правила перепечатки

5 последних уроков рубрики "Разное"

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Создание вебсайта - процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.