Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Загрузка карты

.

Загрузка карты

Теперь, когда мы подключили Google Maps JavaScript, нам, для начала, нужно добавить в веб-страницу элемент, который будет содержать карту, и затем сделать так, чтобы при щелчке мышью по кнопке вызывался метод determineLocation.

Давайте в боковой колонке HTML5 Herald под тремя рекламными баннерами создадим четвертый блок. Мы поместим его внутрь элемента article, так же как и другие рекламны блоки. В нем мы создадим элемент div с идентификатором mapDiv, который будет плейсхолдером для карты. Добавим заголовок, чтобы пользователь понимал, что это такое:

Загрузка карты

На рисунке 10.2 показано, как будет выглядеть новая боковая колонка.

Загрузка карты

Рис. 10.2. Новый виджет, позволяющий пользователю видеть свое местоположение

Теперь нам нужно вызвать determineLocation при щелчке мышью по кнопке. Используем для этого jQuery:

Загрузка карты

Это очень распространенный шаблон в JavaScript и j Query. Если вы только начинаете заниматься фронтенд-программированием, поверьте нам, вы еще много раз его встретите. Благодаря этому коду determineLocation будет вызываться каждый раз при щелчке по кнопке.

Теперь давайте вернемся к нашей функции displayOnMap и поработаем с основными элементами фактического отображения карты. Во-первых, мы создадим переменную myOptions для хранения значений, которые мы передадим в Google Map:

Загрузка карты

Загрузка карты

Первая опция, значение которой мы установим, — степень приближения карты. Для полной карты Земли этот показатель (zoom level) равен нулю. Чем он выше, тем больше подробностей появляется на карте и тем меньший регион попадает в поле отображения. Мы используем zoom level 14, чтобы на экране видны были названия улиц.

Вторая опция — тип отображаемой карты. Существуют следующие их разновидности:

• google.maps.МарТуреId.ROADMAP;

• google.maps.MapTypeld.SATELLITE;

• google.maps.MapTypeld.HYBRID;

• google.maps.MapTypeld.TERRAIN.

Если вам уже приходилось иметь дело с сайтом Google Maps, вы уже понимаете, о чем идет речь. ROADMAP используется по умолчанию, SATELLITE отображает спутниковую фотографию поверхности земли. HYBRID — комбинация первого и второго, a TERRAIN показывает элементы наподобие высот и воды. Мы используем вариант по умолчанию.

Мы выбрали опции, теперь можно и карту создать. Мы будем использовать для этого объект google . maps . Map ().

В первом параметре, который мы ему передаем, содержится ссылка на наш плейсхолдер в структуре DOM страницы index.html, полученная с помощью функции getElementByld. Таким образом мы сообщаем Google Map, что создаваемая карта должна быть помещена внутри этого элемента. Во втором передаваемом параметре будет набор опций, о которых речь шла выше. Мы сохраняем полученную карту в переменной тар:

Загрузка карты

Теперь у нас есть карта, осталось добавить маркер, отображающий пользователя. Маркер — маленькая красная «капелька», которой Google Maps помечает определенные точки.

Для того чтобы создать такой маркер, мы должны передать Google Maps другую разновидность объекта — google .maps. LatLng — в котором содержится информация о широте и долготе. Первая строка нижеприведенного кода создает его и передает ему latitude и longitude как параметры.

Теперь, располагая объектом google. maps. LatLng, мы можем создать маркер. Вызываем конструктор google .maps .Marker, и в двух фигурных скобках ({}) передаем ему координаты в объекте LatLng, карту в объекте тар и заголовок. Последний будет виден при помещении указателя мыши над картой.

Загрузка карты

Загрузка карты

Последним шагом мы центруем карту относительно исходной точки, вызывая map. setCenter с объектом LatLng:

map.setCenter(initialLocation);

Дополнительную информацию об API Google Maps версии 3 вы можете найти в Интернете.

В заключение — о старых мобильных устройствах

Хотя геолокационный API хорошо поддерживается браузерами современных мобильных устройств, вам может понадобиться обеспечить работу вашего приложения и на устройствах предыдущего поколения. В этом случае советуем использовать библиотеку JavaScript с открытым кодом geo-location- javascript.

.

Читайте так же:
Not found