Поэтому ваш клиент отправляет вам электронное письмо и спрашивает: «Можете ли вы разместить одну из этих ярких карт на моей странице контактов, чтобы пользователи могли видеть наше здание со спутника?». Вы использовали карты Google много раз, но есть только одна проблема: вы не знаете, как использовать API. Хорошо, возьми свою ложку и закопайся!
* Нажмите на полноэкранный переключатель.
Шаг 1: Получить уникальный ключ API
Если вы скачаете исходный код, который входит в эту статью, вы обнаружите, что он не работает на вашем сайте. Причина в том, что Google требует, чтобы все пользователи получали уникальный «ключ API» для каждого сайта, который реализует карты Google.
Не бойся. Это 100% бесплатно и занимает около тридцати секунд, чтобы зарегистрироваться. Сначала зайдите на страницу регистрации Google и введите URL своего сайта. Не беспокойтесь о добавлении определенного пути. Корневой URL будет охватывать каждую страницу, которая является частью этого домена. Согласитесь с условиями и нажмите «Создать API».
Это оно! Страница, на которую вы были перенаправлены, содержит ваш уникальный ключ, а также образец страницы — в качестве ускоренного курса. Ваш ключ будет выглядеть примерно так:
ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv
Вы также найдете путь к сценарию, который будет выглядеть так:
|
1
|
<script src=»http://maps.google.com/maps?file=api&v=2ampkey=ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdI5Odvw» type=»text/javascript»></script>
|
Ваш будет отличаться от моего, потому что он будет содержать ваше собственное значение ключа. Скопируйте это и вставьте в верхнюю часть вашего документа.
Вы можете добавить в закладки ссылку на документацию API. Вы, несомненно, будете ссылаться на него по мере развития ваших навыков.
Шаг 2: Настройка вашего HTML
Для простоты мы создадим макет голой кости. Добавьте следующее в элемент body вашего документа.
|
1
|
<div id=»myMap» style=»width: 600px; height: 400px;»></div>
|
В реальной ситуации вы должны перенести стиль во внешний файл (как я делал в видео). Значения высоты и ширины будут использоваться API для определения размеров вашей карты. Не волнуйтесь, ничего не будет обрезано.
Шаг 3: JavaScript
Затем добавьте следующее в свой файл Javascript. Рассмотрите это немного и затем продолжите.
|
1
2
3
4
5
6
7
8
|
$(function() { // when the document is ready to be manipulated.
if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map’s
var map = document.getElementById(«myMap»);
var m = new GMap2(map);
m.setCenter(new GLatLng(36.158887, -86.782056), 13);
}
else {alert(«Your browser is not worthy.»);}
});
|
Чтобы взять этот код построчно:
- Когда документ готов к манипулированию, запустите код внутри. Это синтаксис jQuery, но jQuery по меньшей мере не требуется. Вы также можете просто добавить атрибут «onLoad ()» к своему элементу тела — хотя это грязно.
- Если браузер, с которого пользователь обращается к карте, не совместим с API, отобразите предупреждение (см. Внизу). В противном случае, запустите код внутри.
- Создайте переменную под названием «map» и скажите ей, чтобы найти div, который будет содержать карту.
- Затем создайте переменную с именем «m» и сделайте ее равной новому экземпляру класса «GMap2». В скобках передайте переменную map, которую вы только что создали
- Наконец, установите центральную точку, чтобы карта знала, что показывать. Для этого мы создаем новый экземпляр класса «GLatLng» и передаем значения широты и долготы. Вы можете пойти сюда, чтобы получить соответствующие значения. В моем случае я установил координаты моего родного города. После этого вы можете по желанию ввести уровень масштабирования — который я установил в стандартное значение «13».
Один только этот код даст вам базовую карту, которая может полностью соответствовать вашим потребностям. Однако, если вы хотите также реализовать функции «масштабирования» и «режима карты», читайте дальше.
Шаг 4: уточнение нашей карты
Есть буквально десятки функций, которые вы можете добавить на свою карту. Мы рассмотрим несколько из них. Сначала мы реализуем панель масштабирования, которая позволяет пользователям постепенно увеличивать или уменьшать масштаб.
|
1
|
m.addControl(new GLargeMapControl())
|
Здесь мы берем нашу карту и добавляем новый элемент управления под названием «GLargeMapControl».
Далее, давайте добавим функцию, которая позволит пользователям выбирать, какой режим карты они предпочитают: обычный, спутниковый или гибридный.
|
1
2
|
var c = new GMapTypeControl();
m.addControl(c);
|
- Создайте переменную с именем «c» и сделайте ее равной новому экземпляру класса «GMapTypeControl».
- Добавьте новый элемент управления и введите «c».
Если вы обновите свой браузер, вы увидите, что у пользователя теперь есть возможность выбрать режим просмотра. Но что, если вы хотите установить режим по умолчанию? В таких случаях вы должны использовать «setMapType».
|
1
|
m.setMapType(G_SATELLITE_MAP);
|
При определении режима по умолчанию у вас есть три варианта.
- G_SATELLITE_MAP
- G_NORMAL_MAP
- G_HYBRID_MAP
Вы закончили!
Это было не слишком сложно, не так ли? Есть несколько конкретных имен классов, которые вам нужно запомнить или записать для дальнейшего использования. Но кроме этого, поразительно просто внедрить такую продвинутую карту в свои сайты.
Для вас, дизайнеров шаблонов, почему бы не реализовать это в одной из тем, которые вы продаете на ThemeForest ?
Несколько дней назад мы опубликовали учебное пособие, в котором показано, как объединить множество API, в том числе карты Google. Но многие из вас не знали достаточно, чтобы начать. Надеюсь, это поможет. После того, как вы освоили этот API, почему бы не избавить себя от головной боли и воспользоваться помощью класса PHP под названием Phoogle ? Я думаю, что лучше сначала научиться правильному пути, но теперь, когда у вас есть … некоторые углы! Увидимся на следующей неделе.
Дополнительный ресурс
-
Как создать мэшап, комбинируя 3 разных API
Из этого туториала вы узнаете, как создать коллаж из трех разных API, включая интеграцию с Google Maps.
- Подпишитесь на RSS-ленту и видеопоток для ежедневных новостей и статей о веб-разработке.
