Сегодня google предлагает такое количество api и инструментов для разработчиков, что уже наверное сами затрудняются придумать что то новое. А моё знакомство с google начиналось с google maps api, азы и вéди которого, я вам сегодня собираюсь преподать.
Самое наиполнейшее руководство от самого гугла можно посмотреть, что совершенно естественно у самого гугла. Возникает лишь вполне закономерный вопрос — с чего начать и как бы побыстрее что то уже сделать? В этих вопросах помогу вам я.
Во-первых, нам потребуется ключ API google maps. Получается он очень просто — на специальной странице регистрации ключа. Я понял так, что ключ просто генерируется для определенного доменного имени и больше ни от чего не зависит. Я их генерирую даже для доменов сайтов, запущенных локально под Denver. Возможно, вам потребуется зарегистрироваться на самом google, что тоже не занимает много времени.
Для домена shra.ru я получил вот такой ключик:
|
1 |
ABQIAAAA1eEnuPuMm5tkOPY8mg9kfBR2gcKLxLhzZekBQPxE_ynHOEauhxTGwCWWZ0b4_j7-Nf86iVZYD6cpcg |
Во-вторых, надо придумать какую то задачу, чтобы было интереснее изучать вопрос. Возьмем задачу из практики. Часто у разработчиков возникает задача вставки карты на сайт компании и добавление логотипа компании на эту карту как маркер.
Итак задача: у нас есть контейнер DIV, где мы хотим видеть карту с логотипом нашей 
компании. Пусть это будет штаб-квартира Microsoft. Размеры карты — 500 x 400. Офисов у ребят не мало, выберем их офис в Вашингтоне. На сайте майкрософт находим адрес — Civica Office Building 205 108th Ave. NE, Suite 400 Bellevue, WA 98004. Вводим его на сайте https://www.google.ru/maps. Оказывается сидят они вот в этом небольшом уютном домике с улетным названием — Starbucks (см. фото). Пусть при нажатии на логотип компании показывается ещё и эта фотография.
Основным объектом API google, вокруг которого все вертится, является GMap2. Объявим его.
|
1 2 3 4 5 |
if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(mapDomElm), { size : new GSize(mapX, mapY) } ); } else { alert('Ваш браузер не потянет это API от гугла!'); } |
Мы видим, что вся работа с объектами google.maps производится после проверки браузера на совместимость (GBrowserIsCompatible()), а так же нам нужны следующие данные для инициализации объекта map — контейнер, где отображается карта и размеры карты (mapX, mapY). Далее выполняем позиционирование карты и её настройки.
|
1 2 3 4 5 |
... centerPoint = new GLatLng(centerLat, centerLng); map.setCenter(centerPoint, 17); map.enableScrollWheelZoom(); map.addControl(new GMapTypeControl()); |
Установим центр карты с нужными координатами (широта, долгота) и выберем масштаб. Где брать значения для широты и долготы? — можно попробовать скататься на место событий — и подсмотреть в GPS навигаторе. Но мы поступим дешевле. Когда вы нашли офис на карте maps.google.ru, то могли обратить внимание на ярлычок над картой в виде звеньев цепи. Этот инструмент позволяет вставить карту на свой сайт (почти то, что нам по идее нужно, но не совсем) — а в коде вставки мы видим кучу параметров, среди которых «ll=47.613353,-122.196529» — это позиция центра отображаемой карты. Воспользуемся этими координатами. Параметр масштаба варьируется от 0 (вид из космоса) до 19 (видны даже автомобили на дорогах). На самом деле пределы масштаба зависят от выбранного участка и типа карты.
|
1 2 3 4 5 6 |
http://maps.google.ru/maps?f=q&source=s_q&hl=ru& geocode=&q=Civica+Office+Building+205+108th+Ave.+NE,+Suite+400+Bellevue, +WA+98004+&sll=47.219568,-86.484375&sspn=35.556449,92.548828& ie=UTF8&hq=Civica+Office+Building+205+108th+Ave.+NE,+Suite+400& hnear=%D0%91%D0%B5%D0%BB%D0%B2%D1%8C%D1%8E,+WA+98004,+USA& amp;ll=47.613353,-122.196529&spn=0.008665,0.017681&z=16 |
Теперь добавим нужный нам маркер. Для логотипа нужно создать объект GIcon.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//Для логотипа нужно создать объект GIcon. Icon = new GIcon(null, 'http://www.microsoft.com/library/toolbar/3.0/images/banners/ms_masthead_ltr.gif'); //зададим размеры картинки, Icon.iconSize=new GSize(136,42); //позицию точки маркера относительно левого верхнего угла картинки, Icon.iconAnchor=new GPoint(68,45); //позицию информационного окошка относительно левого верхнего угла картинки Icon.infoWindowAnchor=new GPoint(68,55); //создадим сам маркер, а в качестве изображения маркера - логотип компании obj = new GMarker(centerPoint, { title : 'Офис Майрософт в Вашингтоне', icon: Icon}); //прикрепим маркер к карте map.addOverlay(obj); |
Осталось только показывать окошечко с описанием и фотографией, для этого сделаем зацепку на событие onclick маркера (т.е. когда по нему будут кликать — будет показываться окошечко с информацией).
|
1 2 3 4 5 |
GEvent.addDomListener(obj, "click", function () { this.openInfoWindow('Здесь сидят парни из Майкрософт.<br /><img width="200" src="//shra.ru/wp-content/uploads/2010/01/starbucks.jpg"'); }); map.addOverlay(obj); |
Внутри вызываемого обработчика наш маркер является this. Открываем информационное окошко с комментарием и фоткой.
Рабочий код у нас написан. Осталось все правильно инициализировать и запустить. В итоге у нас должно получиться два файла — map.html и map.js. Полный текст скрипта выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
//эти три параметра нужны будут для составления url подключения библиотеки гугле var myVer = '2'; //shra.ru var myKey = 'ABQIAAAA1eEnuPuMm5tkOPY8mg9kfBR2gcKLxLhzZekBQPxE_ynHOEauhxTGwCWWZ0b4_j7-Nf86iVZYD6cpcg'; var myLng = 'ru'; //параметры центральной точки (centerLat, centerLng, заголовок) var marker = [47.613353,-122.196529, 'Филиал Microsoft в Вашингтоне']; /*вызов карты облачим в функцию с параметрами: mapID - строка с именем ID контейнера, где будет показана карта mapX, mapY - размеры карты в пикселях */ function loadmap(mapID, mapX, mapY) { if (GBrowserIsCompatible()) { var mapCont = document.getElementById(mapID); //установим размеры DOM области через стили mapCont.style.width = mapX + 'px'; mapCont.style.height = mapY + 'px'; //инициализация объекта карты гугле var map = new GMap2(mapCont, { size : new GSize(mapX, mapY) } ); centerPoint = new GLatLng(marker[0], marker[1]); map.setCenter(centerPoint, 17); map.enableScrollWheelZoom(); //добавим панель переключения видов карт map.addControl(new GMapTypeControl()); //займемся логотипом (я решил закачать его себе на сайт, а то ведь макрософт //не гарантирует мне, что он будет лежать там где я его нашел и дальше) var Icon = new GIcon(null, 'http://shra.ru/wp-content/uploads/2010/01/ms_masthead_ltr.gif'); //зададим размеры картинки, Icon.iconSize=new GSize(136,42); //позицию точки маркера относительно левого верхнего угла картинки, Icon.iconAnchor=new GPoint(68,45); //позицию информационного окошка Icon.infoWindowAnchor=new GPoint(68,55); //создадим сам маркер, а в качестве иконки логотип компании var obj = new GMarker(centerPoint, { title : marker[2], icon: Icon}); GEvent.addDomListener(obj, "click", function () { this.openInfoWindow('Здесь сидят парни из Майкрософт. <img src="//shra.ru/wp-content/uploads/2010/01/starbucks.jpg" alt="" width="200" />');}); //прикрепим маркер к карте map.addOverlay(obj); } else { alert('Ваш браузер не потянет этот API от гугла!'); } |
В в html включим такие строки:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="map"></div> <script type="text/javascript" src="map.js"></script> <script type="text/javascript"> //подключение API google maps var scriptTag = '<' + 'script src="http://maps.google.com/maps?file=api&v='+myVer; scriptTag += '&key=' + myKey + '&hl=' + myLng + '">'+'<'+'/script>'; document.write(scriptTag); </script> <script type="text/javascript"> //вызов нашей функции для показа карты нужного размера loadmap('map', 500, 400); </script> |
Контейнер DIV, где отображается карта имеет ID=«map». Вот и готово. Смотрим, что получилось.
Спасибо за урок!:)
Мне по сути не за что. Спасибо Гуглу :)!