Быстрая вставка Google Maps – GMaps.js

Rating: 9.8
Author: Денис Абдуллин

02012-06-103340Денис Абдуллин

Работать с API Google Maps не так уж и трудно, все подробно расписывается на ресурсах Google. Однако, проще будет использовать GMaps.js, многофункциональный плагин на JQuery. Он поможет вставить множество вариантов карт на страницу проще.

Помимо добавления стандартной карты в определенное место, мы можем определить масштаб, добавить маркеры, получить местоположение пользователя, используя геолокацию HTML5, определять маршруты, рисовать ломаные линии и многое другое. И код наш будет занимать всего несколько строк.

Также присутствуют функции обратного вызова на каждое действие, чтобы определять события на стороне пользователя. Нет подробного описания GMaps.js, но зато есть примеры с кодами (демо).

Примеры

1. Простая вставка карты:

Code

new GMaps({
  div: '#map',
  lat: -12.043333,
  lng: -77.028333
});

Здесь вы указываете DIV, в который нужно загрузить карту, долготу и широту.

2. События карты:

Code

map = new GMaps({
  div: '#map',
  zoom: 16,
  lat: -12.043333,
  lng: -77.028333,
  click: function(e) {
  alert('click');
  },
  dragend: function(e) {
  alert('dragend');
  }
});

Вы можете задать функции, например, при перемещении карты и по клику на ней.

3. Добавление маркера:

Code

map.addMarker({
  lat: -12.042,
  lng: -77.028333,
  title: 'Название маркера',
  infoWindow: {
  content: '<p>Всплывающая информация о маркере с HTML содержимым</p>'
  }
  });

4. Определение местоположения:

Code

GMaps.geolocate({
  success: function(position) {
  map.setCenter(position.coords.latitude, position.coords.longitude);
  },
  error: function(error) {
  alert('Ошибка геолокации: '+error.message);
  },
  not_supported: function() {
  alert("Ваш браузер не поддерживает геолокацию");
  },
  always: function() {
  alert("Готово!");
  }
});

Это лишь 4 примера из 19. Перейдите на страницу Демо, чтобы увидеть все примеры.

Демо страница

Скачать

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.