Карти - Google maps

Използване на Google maps карти

Сред полезните допълнения на страниците на един сайт несъмнено се нареждат онлайн картите. Независимо дали става дума за споделяне на информация за добро кафене или за магазините на фирмата Ви, които искате лесно да бъдат откривани от посетителите на Вашия сайт, една карта струва много повече от всякакво обяснение с думи.

Едно много полезно приложение за включване на онлайн карти е Google maps. По всяка вероятност вече сте ползвали Google maps и имате представа за възможностите на това приложение, но за всеки случай можете да погледнете и една примерна страничка с включена Google maps карта: Дом на хумора и сатирата - Габрово.

Код за включване на Google maps карта в интернет страница

Тази примерна страница ще използвам, за да Ви представя начина за включване на Google maps карта в HTML страница. Ето най-важната част от използвания код:

Нека разгледаме подробно какво прави този код.

• Първата meta дума: viewport задава началните условия за показване на картата: какъв да бъде началния мащаб, както и дали размерът на картата може да се променя от потребителя.
• Следва указание за зареждане на самия JavaScript код за Google maps приложението. Настоящият пример ползва версия 3 на Google maps, която все още няма разновидности и адресът на JavaScript файла е просто http://maps.google.com/maps/api/js. Допълнително трябва да се укаже дали ще се ползва геопозициониране: sensor=true или sensor=false. Геопозиционирането използва реалните координати на потребители, които зареждат интернет страницата примерно на мобилния си телефон. В случая картата не зависи от такива координати и съответно е използван sensor=false.
• Функцията initialize създава самата карта, като указва няколко важни параметъра:
  • координатите на точката, която ще бъде център на картата. Тези координати-числа се съхраняват в променливата latlng и могат да се получат за желания от Вас адрес след подаване на заявка към Google maps сървър по следния начин. В адресното поле на браузъра въведете адрес:
    http://maps.google.com/maps/geo?q=търсен+адрес&output=формат&oe=utf-8&sensor=true_or_false&key=Вашия-Google-API-key
    
    • след q= въведете адреса, чиито координати търсите, като заменяте всички празни интервали между думите със знак +;
    • след output= въведете една от възможните стойности (xml, csv, kml, json) - това е вида, в който ще се покажат резултатите. Ако нямате специални изисквания, вида по подразбиране json ще Ви свърши работа;
    • sensor е използван в същия смисъл, който има думата в началото на JavaScript кода - дали информацията за геопозиционирането идва от устройство със сензор за локализиране. В конкретния случай използваме статична информация (адресът на обекта на картата не зависи от местоположението на потребителя) и sensor=false.
    • На мястото на Вашия-Google-API-key въведете реалната буквено-числена комбинация, която сте получили като API key. Ако все още нямате API key, Ви е необходима предварителна регистрация за Google акаунт, a самия API key ключ можете да получите от следната страница:Google maps API key.
  • мащаба на картата, задаван с променливата zoom: по-голямо число означава по-голямо увеличение.
  • типа на картата, зададен с "mapTypeId: google.maps.MapTypeId." и една от следните думи:
    • ROADMAP: картата по подразбиране - показани са пътищата
    • SATELLITE: карта със сателитни изображения, използвани от Google Earth
    • HYBRID: комбинация от пътна и сателитна карта
    • TERRAIN: физическа карта с особеностите на терена
  • допълнително, макар и не задължително, е добавянето на показалец за обекти на картата. В настоящия пример е включен показалец чрез променливата marker, за която са указани координати (position: latlng - същите като центъра на картата), карта, на която да се покаже показалеца (трябва да е същата, като използваната - map) и заглавие (title), което ще се показва при поставяне на показалеца на мишката върху обекта.
  • с променливата infowindow се създава прозорец, който ще извежда допълнителна информация за обекта, а самото съдържание на тази информация е поставено в променливата contentString.
  • самото извикване на прозореца с допълнителна информация става с функцията
    google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.open(map,marker);
    });
    В случая за условие за отваряне на прозореца е избрано просто поставянето на показалеца на мишката върху обекта (mouseover), но вместо това бихме могли да сложим напр. click - прозорецът ще се отваря само при кликване върху обекта.
• с функцията <body onload="initialize()"> се извиква JavaScript кода, който създава картата с вече зададените параметри, а самата карта се разполага в създадения специално за нея div елемент с име id="map_canvas".

Опитът - най-добрия учител

Обяснението на пръв поглед може да Ви се стори сложно, но един от най-изпитаните начини да научите нещо е да експериментирате с работещ модел. Можете да използвате картата на Дом на хумора и сатирата като отправна точка за своите опити и да смените координатите, размера и вида на картата, заглавието и допълнителната информация за обекта, както и при какви условия да се показва прозорецът с обяснения.

Разбира се, имате пълната свобода да решите в коя част на интернет страницата да се появи картата чрез CSS указания.

Ако целта Ви е съвсем простичка, статична карта, може би с подходяща модификация на примера "Дом на хумора и сатирата" ще постигнете желания резултат. Но ако искате да създадете по-сложни, интерактивни карти, които например да реагират на въведени от потребител стойности, най-добре е да погледнете официалната документация на Google maps.