2. easyAPI. Удаленная загрузка XML.
И вот, наконец, долгожданная, вторая статья из раздела easyAPI.
Сегодня мы узнаем, как загрузить XML-данные с удаленного домена. Подобная задача возникает, например, когда владелец сайта на бесплатном (а значит – без серверного кода) хостинге хочет вставить в страницу погодный XML-информер. Именно на этом примере мы и рассмотрим сегодня удаленную загрузку XML-файлов.
Итак, для фоновой загрузки данных мы привыкли использовать так называемый AJAX, то есть объект XMLHttpRequest, про эту технологию я уже не раз писал в статьях блога. Однако, эта технология в данном случае никуда не годится. Почему? А потому что объект XMLHttpRequest не позволяет делать запросы к доменам, иным, чем тот, в котором работает скрипт, создающий этот объект.
И здесь к нам на помощь приходит технология, получившая название JSONP, что значит JavaScript Object Notation with Padding. Про сам JSON можео почитать вот здесь JSON, а JSONP представляет собой объект в нотации JSON обернутый в вызов функции, что-то вроде этого:
onSuccess('JSON-object')
А теперь объясню, зачем это нужно. Хоть XMLHttpRequest и не позволяет делать запросы к удаленным доменам, однако все браузеры позволяют нам загружать JavaScript’ы с любых доменов, то есть страница, загруженная с домена localdomain.ru, позволяет выполнить в ее рамках следующую инструкцию:
<script type='text/javascript' src='http://remotedomain.ru'> </script>
А теперь смотрите, что происходит. Наша страница загружает скрипт с удаленного домена, а скрипт этот возвращает нам JSONP-конструкцию, которая после загрузки скрипта тут же и выполнится, а значит, вызовет некую предопределенную заранее функцию onSuccess, которая получит в качестве аргумента тот самый XML-файл. И теперь мы можем делать с ним все, что захотим!
Осталось только одно – завладеть таким remotedomain.ru, который вернет нам то, что нам нужно. Скажу, что домен этот – http://easyapi.ru. Да-да, именно на этом, предусмотрительно приобретенном не так давно домене, и будут жить все наши полезные, жизненно необходимые почти каждому веб-разработчику, функции. 🙂 Скромненько и со вкусом…
Итак, в рамках домена easyapi.ru я уже создал ответную часть для удаленной загрузки XML-документов. Живет она вот здесь: http://easyapi.ru/xml/get.php и принимает на входе два GET-параметра: url и callback. Первый из них – адрес, с которого будет загружаться XML-файл, а второй – имя JavaScript-функции, которая будет вызвана после загрузки, и которая должна будет обработать полученный XML-документ.
Не откладывая дело в долгий ящик, приведу ниже содержимое страницы, которая, используя наш сервис easyAPI, загружает данные об XML-погоде в городе Москва и при помощи XSLT-шаблона преобразует эти данные в красивый информер, который вы, кстати, изучив основы XSLT-преобразований, сможете оформить по своему усмотрению.
Вот исходный код страницы:
<html>
<head>
<script type="text/javascript">
function getXMLFromString(s) {
if(window.ActiveXObject)
{
var xml;
xml=new ActiveXObject("Microsoft.XMLDOM");
xml.async=false;
xml.loadXML(s);
return xml;
}
else if(window.DOMParser)
{
var parser = new DOMParser();
return parser.parseFromString(s,'text/xml');
}
else
{
alert("Загрузка XML не поддерживается браузером");
return null;
}
}
function getXMLDocument(url)
{
var xml;
if(window.XMLHttpRequest)
{
xml=new window.XMLHttpRequest();
xml.open("GET", url, false);
xml.send("");
return xml.responseXML;
}
else
if(window.ActiveXObject)
{
xml=new ActiveXObject("Microsoft.XMLDOM");
xml.async=false;
xml.load(url);
return xml;
}
else
{
alert("XML loading not supported");
return null;
}
}
function transformXslt(source,style) {
if(window.ActiveXObject)
{
return source.transformNode(style);
}
else if(window.XSLTProcessor)
{
var xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(style);
var resultDocument = xsltProcessor.transformToDocument(source);
var xmls = new XMLSerializer();
return xmls.serializeToString(resultDocument);
}
else
{
alert("Преобразование XML не поддерживается браузером");
return null;
}
}
</script>
</head>
<body>
<div id="res"></div>
<script type="text/javascript">
function onSuccess(res)
{
var xslt = getXMLDocument("http://easy-4-web.ru/samples/easyxml/gis.xsl");
var xml = getXMLFromString(res.result);
var res = transformXslt(xml, xslt);
document.getElementById("res").innerHTML=res;
}
</script>
<script src="http://easyapi.ru/xml/get.php?url=http://informer.gismeteo.ru/xml/27612_1.xml&callback=onSuccess" type="text/javascript"></script>
</body>
</html>
В первой части страницы мы видим три функции, все они – кроссбарузерные:
- getXMLFromString(s) – преобразует валидную строку s в XML-документ
- getXMLDocument(url) – загружает XML-документ с адреса url
- transformXslt(source,style) – преобразует XML-документ source при помощи XSLT-шаблона style
В нижней части исходного кода мы видим функцию onSuccess – ока как раз и выполнится после загрузки xml-документа с удаленного домена. Она отрисует загруженный и полученный в переменной res.result XML-Документ при помощи XSLT-файла, хранящегося по адресу http://easy-4-web.ru/samples/easyxml/gis.xsl
И в самой-самой нижней части исходного кода мы видим вот такую конструкцию:
<script src="http://easyapi.ru/xml/get.php?url=http://informer.gismeteo.ru/xml/27612_1.xml&callback=onSuccess" type="text/javascript"></script>
Вот эта часть и представляет собой загружалку XML-документов с удаленных доменов. Как видим в атрибуте src тега SCRIPT мы указали, кто будет заниматься загрузкой (http://easyapi.ru/xml/get.php), что он будет загружать (url=http://informer.gismeteo.ru/xml/27612_1.xml) и какая функция займется обработкой документа (callback=onSuccess)
Здесь вы можете скачать исходные коды приведенного примера. А вот здесь – посмотреть, как это работает.
Кросдоменный JavaScript (JSONP)
Итак, мы уже научились использовать объект XMLHttpRequest для фоновой загрузки данных с сервера, этот подход подробно описан в статье AJAX. 1 – Что это такое?. Однако, приведенный метод обладает одним недостатком – он не позволяет делать кроссдоменные запросы, то есть скрипт расположенный на домене easy-4-web.ru не может обратиться к домену vision4web.ru, а иногда этого так хочется. И здесь нам на помощь придет метод динамически подгружаемых скриптов <SCRIPT>.
Как известно, HTML-элемент <SCRIPT> может загружаться и с чужого домена, то есть аттрибут src у него может указывать вообще на любой домен. При этом, сразу после загрузки в нашу страницу, скрипт начнет выполняться. Таким образом, вставив в этот скрипт вызов некой заранее известной функции, мы можем организовать оповещение страницы о том, что скрипт загружен и готов к выполнению работы. А данные для для скрипта можно упаковать в пакет JSON. Такой комбинированный подход носит имя JSONP (JSON with padding).
На клиентской стороне мы выполняем такой код:
var script = document.createElement("script");
script.src = 'http://mydomain.ru/script.php?callback=func1';
script.type = 'text/javascript';
document.body.appendChild(script);
А по адресу http://mydomain.ru/script.php поселим вот такой код:
<?php
echo($_REQUEST['callback'].'({"result":"Успешно!"})');
?>
На клиентской стороне также существует такой callback (то есть функция, которая сработает после загрузки скрипта):
function func1(response)
{
alert(response.result);
}
Протестировать рабочий пример можно здесь: http://easy-4-web.ru/samples/jsonp/index.html, а скачать код вышеприведенного примера можно здесь: http://easy-4-web.ru/images/jsonp.zip
В тестовом примере, как можно увидеть, не происходит кроссдоменной загрузки – мы загружаем с того же домена, где расположен скрипт. Но вы можете заменить URL в этом месте кода:
<input type="button" value="Получить JSONP"
onclick="getJSONP('http://easy-4-web.ru/samples/jsonp/handler.php',onSuccess)"/>
на ваш собственный или на наш тестовый handler, расположенный на другом домене, (вот здесь http://vision4web.ru/api/handler.php) и убедиться в том, что кроссдоменная загрузка прекрасно работает.
Ниже приведен скриншот сетевого взаимодействия:
Как видно, при нажатии на кнопку “Получить JSONP” происходит создание элемента <SCRIPT> с атрибутом src=http://easy-4-web.ru/samples/jsonp/handler.php, при этом браузер тут же начинает загружать этот скрипт с удаленного сервера. А загруженный скрипт представляет собой вызов функции onSuccess() с параметром {“result”:”Успешно!”}. После загрузки скрипта он тут же начинает выполняться, тем самым выполняя функцию OnSuccess, которая, получив в качестве аргумента JSON-объект, обрабатывает его и совершает все необходимые действия, обусловленные логикой приложения.
Этот подход я собираюсь использовать при реализации многих полезных сервисов в рамках проекта easyAPI.
AJAX с помощью jQuery и ASP.NET web-сервисов
Если вы создаете сайты под ASP.NET, то возможно вам уже довелось использовать AJAX-framework, предоставляемый Microsoft. Тот самый, что использует ScriptManager, rfк в примере, приведенном ниже:
1) Содержимое страницы Default.aspx:
<asp:ScriptManager ID="MainSM" ScriptMode="Debug" runat="server"> <Services> <asp:ServiceReference Path="~/usersrv.asmx" InlineScript="false" /> </Services> </asp:ScriptManager>
2) Содержимое файла script.js:
// вызов ajax-метода GetPoint
usersrv.GetPoint(id,OnUSGetPointSucc,OnUSGetPointErr);
// callback успешного вызова
function OnUSGetPointSucc(res)
{
alert('success');
}
// callback ошибки
function OnUSGetPointErr(err)
{
alert('success');
}
3) Содержимое файла usersrv.asmx:
<%@ WebService Language="C#" CodeBehind="~/App_Code/usersrv.cs" %>
4) Содержимое файла usersrv.cs:
[WebService(Namespace = "http://tempuri.org/")]
[System.Web.Script.Services.ScriptService]
public class usersrv : System.Web.Services.WebService
{
[WebMethod]
public Dictionary<string, object> GetPoint(long p_id)
{
Dictionary<string, object> res = new Dictionary<string, object>();
try
{
// готовим возвращаемые параметры и сохраняем их в res
}
catch (Exception)
{
res["Error"] = U.GTFR("userpoints_err");
}
return res;
}
}
Этот метод достаточно прост и удобен, если бы не одно “но” – он весит 132 Кб. И обладает еще одним интересным свойством: если в нашем проекте есть несколько страниц, использующих AJAX, то каждая из них будет заново загружать этот скрипт, потому что при загрузке скрипта на странице используется примерно следующий URL http://domainname/ScriptResource.axd?d=TvjJs2RlM8MX3pIUhEsdnZKUzGh-9Wr9nvNBZJbxf-xzq-Wvzbpj6FfMJqZqOPR8Pku52J2zBqleUlYtVE8XCyfyo3kcbSnhbwzYc2LkdfQ1&t=ffffffffee41303f и для каждой страницы в пределах вашего проекта будет свой ScriptManager, а значит и свой уникальный ID в query-string. А значит скрипт этот для каждой страницы будет браться не из кэша, а запрашиваться заново с сервера.
В общем, мне все это не понравилось и я заинтересовался, как можно сэкономить трафик и перейти на AJAX.jQuery. Тем более, что он уже использовался в этом же проекте для других целей. Сказано – сделано! И вот какое решение я нашел.
Собственно, модификации пришлось подвергнуть как сами клиентские JavaScript-ы, так и методы, вызываемые на стороне сервера. Связано это с тем, что мне хотелось передавать в качестве параметров для web-сервиса сложные объекты, а не просто строки и целые значения. И получать в ответ хотелось тоже сложные объекты, а не просто строки.
Все это можно легко и просто сделать, передавая как в ту так и в другую сторону все же строки, но строки в формате JSON, который является родным для JavaScript. Да к тому же ASP.NET обладает встроенными возможностями сериализации/десериализации JSON.
Правда, для сериализации объекта в JSON на клиентской стороне пришлось использовать еще одну дополнительную библиотеку json2.js. Таким образом, обе библиотеки весят около 67 Кб. Да плюс ко всему в случае нескольких ajax-страниц в проекте, скрипт загрузится всего один раз, и для остальных страниц будет браться из кэша браузера.
Но от слов – к делу! Вот содержимое скрипта, выполняемого на клиентской стороне:
// готовим передаваемые параметры в переменную par, здесь - всего лишь эмуляция
var par = new Object();
par.a = 5;
par.b = 'data';
par.c = new Array();
par.c[0] = 5;
par.c[1] = 10;
// сериализуем объект
var ser = JSON.stringify(par);
// формируем ajax-запрос
$.ajax({
type: "POST",
url: "usersrv.asmx/GetPoint",
data: "{'par':'"+ser+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(r) {
var res=r.d;
// сериализуем для наглядности полученные данные и выводим их
на страницу
// в реальном приложении здесь мы просто будем использовать готовые
данные
// в переменной res без сериализации
document.getElementById("result").innerHTML=JSON.stringify(r);
},
error: function(err) {
// обработка ошибки
alert('error: '+err.responseText);
}
});
}
А вот содержимое usersrv.cs:
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.Script.Serialization;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class usersrv : System.Web.Services.WebService
{
public usersrv() { }
[WebMethod]
public ResponseType GetPoint(string par)
{
ResponseType response = new ResponseType();
RequestType request = new RequestType();
try
{
// десериализуем полученные параметры
JavaScriptSerializer ser = new JavaScriptSerializer();
request = ser.Deserialize<RequestType>(par);
}
catch (Exception)
{
response.isError = true;
response.message = "Parameters is invalid";
return response;
}
// преобразуем переданные параметры и готовим ответ
// здесь - всего лишь эмуляция обработки данных
if (request.c != null && request.a == request.c.Length)
{
response.isError = false;
response.message = "That's good";
}
else
{
response.isError = true;
response.message = "Length is not the same";
}
return response;
}
}
А вот описание двух воспомогательных классов:
public class RequestType
{
public int a;
public string b;
public int[] c;
}
public class ResponseType
{
public string message;
public bool isError;
}
Разумеется, они могут быть сколь угодно сложными. Думаю, что суть алгоритма ясна из комментариев в тексте программы.
Ссылка на архив с готовым проектом здесь.
Парсинг XML в JavaScript на примере XML-погоды от gismeteo.ru
Итак, заинтересовала меня тема, как распарсить XML-файл посредством JavaScript. Немного порыскав в поисковиках наткнулся на весьма познавательную статью по этой теме XML в Microsoft Internet Explorer 5.0. Есть у этой статьи маленький недостаток – она посвящена только IE, а мы в нашем блоге твердо решили писать только кроссбраузерный код. Однако, для начала хватило и этой статьи, сначала весь код был написан для IE, и затем была осуществлена безуспешная попытка запустить его также в Opera, Mozilla, Chrome. Но как я уже говорил “не боги горшки обжигают”, все некроссбраузерные баги были успешно найдены и исправлены. Это р-раз.
В качестве подопытного кролика был взят XML-файл, содержащий в себе данные о погоде на ближайшие сутки от Gismeteo.ru. Собственно, открыв эту страницу, и выбрав интересующий вас город, вы можете ниже на той же странице наблюдать содержимое этого XML-файла, и описание его структуры. Это д-два.
Сопоставив первые два пункта уже можно сваять свой собственный парсер XML-документов на JavaScript, однако если вам лень, то читайте статью дальше. В ней я расскажу о том, как провести анализ содержимого XML-файла и отобразить его в том виде, в котором вам хочется. Это т-три.
А вот сразу ссылка на результаты работы моего скрипта. Не расстраивайтесь, что выглядит все так просто, скриптик позволяет посредством шаблонов задать собственный вид отображения результатов, и об этой возможности я расскажу ниже.
Сразу хочу предупредить, что ниже пойдет теоретическая и практическая часть работы с XML-файлами, и если вам не хочется вникать во все эти подробности, то вы можете сразу перейти в самый конец статьи и по предложенной там ссылке скачать готовый скрипт обработки XML-документа, содержащего прогноз погоды от gismeteo.ru. А теперь теория…
Итак, что же такое XML? Wikipedia утверждает, что:
XML (eXtensible Markup Language — расширяемый язык разметки) — рекомендованный консорциумом W3C язык разметки, представляющий собой свод общих синтаксических правил. XML — текстовый формат, предназначенный для хранения структурированных данных, для обмена информацией между программами, а также для создания на его основе более специализированных языков разметки. Целью создания XML было обеспечение совместимости при передаче структурированных данных между разными системами обработки информации, особенно при передаче таких данных через Интернет.
Визуально структура XML может быть представлена как дерево. Важнейшее обязательное требование состоит в том, что документ должен иметь только один корневой элемент (в нашем случае это элемент MMWEATHER). Это значит, что данные всего документа должны быть расположены между единственным начальным корневым тегом и соответствующим ему конечным тегом.
Остальная часть XML-документа состоит из вложенных элементов, которые могут иметь атрибуты и содержимое. Элемент обычно состоит из пары тегов (открывающего и закрывающего), обрамляющих другие элементы. Открывающий тег состоит из имени элемента в угловых скобках, например, <FORECAST> ; закрывающий тег состоит из того же имени в угловых скобках, но перед именем ещё добавляется косая черта, например, </FORECAST>. Содержимым элемента называется всё, что расположено между открывающим и закрывающим тегами, включая текст и другие вложенные элементы.
Кроме содержания у элемента могут быть атрибуты — пары имя-значение, добавляемые в открывающий тег после названия элемента. Например в случае <PHENOMENA cloudiness=”2″ precipitation=”10″ rpower=”0″ spower=”0″/>
элемент PHENOMENA имеет 4 атрибута cloudiness, precipitation, rpower и spower имеющие соответственно значения 2, 10, 0, 0.
Итак, со структурой XML-файла более-менее разобрались. Осталось только понять, каким образом все это богатство обрабатывать в JavaScript. Собственно, в статье XML в Microsoft Internet Explorer 5.0 можно обо всем этом прочесть, но я намерен вкратце обрисовать ниже основные приемы анализа XML-файлов в контексте поставленной в начале статьи задачи – разбора XML-документа, содержащего прогноз погоды на сутки от gismeteo.
- Загрузка XML-документа. Хочу сразу заметить, что загрузка любых файлов из JavaScript возможна при соблюдении одного обязательного условия – загружаемый файл должен быть расположен в том же домене, где и сама страница его загружающая. Поэтому невозможно со страницы, расположенной, например, по адресу http://easy-4-web.ru/samples/gismeteo/ загрузить файл с сайта http://gismeteo.ru. А это означает, что … проблему надо как-то решать. Есть два пути: либо скачать файл с сайта gismeteo.ru на свой домен, либо создать на вашем домене простой PHP-обработчик, который сам будет скачивать файл с другого домена и выдавать его содержимое от своего имени. В предлагаемом мною решении я пошел по второму пути и поэтому чуть ниже приведу вам PHP-скрипт, выполняющий данное действие. А теперь, собственно, о загрузке XML-документов.
В IE эта операция производится с помощью следующего кодаxml=new ActiveXObject("Microsoft.XMLDOM"); xml.async=false; xml.load(url);После выполнения которого в переменной xml будет храниться обработанный XML-Документ. Конечно, если документ был верно отформатирован. В ином случае будет сгенерировано исключение.
Во всех остальных браузерах (Opera, Firefox, Chrome) загрузка файлов выглядит иначе:xml=new window.XMLHttpRequest(); xml.open("GET", url, false); xml.send("");После чего в поле xml.responseXML можно обнаружить обработанный XML-документ. Таким образом, полный текст функции, осуществляющей загрузку XML-документа, будет выглядеть следующим образом:
function getXMLDocument(url) { var xml; if(window.XMLHttpRequest) { xml=new window.XMLHttpRequest(); xml.open("GET", url, false); xml.send(""); return xml.responseXML; } else if(window.ActiveXObject) { xml=new ActiveXObject("Microsoft.XMLDOM"); xml.async=false; xml.load(url); return xml; } else { alert("Загрузка XML не поддерживается браузером"); return null; } } - Получение коллекции элементов по имени элемента производится использованием метода getElementsByTagName(tagname) объекта XMLDOMDocument. Например, получить массив всех элементов TOWN можно так: xml.getElementsByTagName(“TOWN”). Понятно, что в переменную xml уже должен быть загружен сам XML-документ.
- Просмотр коллекции элементов лучше проводить с помощью цикла for, так как итератор nextNode() пригодный для использования в цикле while, увы, не определен для результата, возвращаемого объектом XMLHttpRequest, а значит будет работать только в IE. Вот код для просмотра коллекции элементов циклом for:
var towns=xml.getElementsByTagName("TOWN"); if(towns) for(var i1=0; i1<towns.length; i1++) { town=towns[i1]; // операции над текущим элементом town } - Получение атрибутов элемента.
Вообще, все атрибуты элемента хранятся в его коллекции attributes, однако доступ к ней неудобен, и поэтому я написал простую функцию, которая пробегает по всей коллекции атрибутов и распаковывает ее в удобный для работы массив, позволяющий получить доступ к любому атрибуту через оператор “квадратные скобки”. Вот эта функция:function getAttributes(node) { var ret = new Object(); if(node.attributes) for(var i=0; i<node.attributes.length; i++) { var attr = node.attributes[i]; ret[attr.name] = attr.value; } return ret; }
Вот собственно и вся предварительная подготовка. Используя эту информацию, уже можно написать анализатор XML-файлов с прогнозом погоды. Конечно, работа с XML-файлами гораздо сложнее, чем я здесь описал, но для пытливых умов существуют книги, интернет, поисковики.
Вот ссылка на готовый скрипт парсера XML-погоды. Вам следует только обратить внимание на шаблоны (переменная template) в конце файла index.html. Это объект в JSON-нотации, содержащий в себе следующие поля: “town”, “forecast”, “phenomena”, “pressure”, “temperature”, “wind”, “relwet”, “heat”, “t_forecast”, “t_template”. Первые 8 представляют собой строки, в которых хранятся шаблоны отображения конкретных нюансов прогноза: город, дата прогноза, атмосферные явления, давление, температура, ветер, относительную влажность, комфортную температуру. В HTML-разметку каждого шаблона вставляются конкретные данные прогноза, которые имеют вид соответствующих имен атрибутов, взятых в фигурные скобки. Все имена атрибутов вы можете увидеть внизу страницы Gismeteo.ru. Для некоторых числовых атрибутов существуют также их строковые псевдонимы, получаются они путем прибавления к атрибуту префикса “s”. Абсолютно все используемые в шаблонах атрибуты вы можете увидеть в конце HTML-разметки страницы index.html, в тегах <script>.
И еще два шаблона, используемых в переменной template. Это t_forecast и t_template. Первый задает разметку прогноза для конкретного времени суток, а второй – разметку для всех прогнозов одного города.
Понимаю, что последний абзац получился запутанным, но, надеюсь, взглянув в код, вы все поймете самостоятельно. Если же возникают вопросы, то пишите их в комментариях к посту, Отвечу на все.
Где-то в середине статьи я обещал показать код PHP-Обработчика, скачивающего XML с других сайтов. Код этот вы можете увидеть в архиве с исходниками в файле xml.php. Он короткий и в пояснениях не нуждается.
Спутниковые карты на Вашем сайте
Многие из Вас видели на некоторых сайтах удобные спутниковые карты, на которых отмечены или магазины или кинотеатры или маршруты. Причем карту эту можно двигать мышкой, приближать, удалять, изменять внешний вид. Вот, например, здесь. Хотелось бы Вам организовать у себя на сайте нечто подобное? Это гораздо проще, чем может показаться на первый взгляд.
На данный момент API спутниковых карт предоставляют три крупных игрока: Яndex , Google и Microsoft . Возможно, есть и другие сервисы, имеющие собственные географические и спутниковые карты, но я не уверен, что они предоставляют полноценный API для использования карт в своих веб-приложениях.
Если сравнивать карты от Google и от Яndex, так мне больше нравятся буржуйские карты, на мой взгляд, у них и оптика лучше, и охват территории – шире.
Лужники, как их видит Google
Лужники, как их видит Яndex
В сегодняшней статье я расскажу о том, как без особых хлопот внедрить в свой сайт такую карту.
Итак, вашим первым шагом будет посещение вот этого адреса http://code.google.com/intl/ru/apis/maps/ . В принципе там все написано, но если читать не хочется, то я расскажу, что делать дальше.
Итак, для начала вам нужно иметь аккаунт на google.com. Чтобы создать аккаунт, нужно зайти на https://www.google.com/accounts/NewAccount/, заполнить необходимые поля (причем, адрес почты может быть на любом почтовом сервере) и нажать «Создайте мой аккаунт». Затем на указанный адрес будет выслано письмо с подтверждением, в котором нужно пройти по предложенной ссылке. Поздравляю! Теперь у вас есть аккаунт google и вы можете переходить к следующему шагу.
Теперь на странице http://code.google.com/intl/ru/apis/maps/signup.html вам необходимо получить ключ API для работы с картами google. Здесь вы ставите галочку «Я ознакомлен и согласен с условиями и положениями», а в поле «URL-адрес моего веб-сайта» прописываете именно тот URL, на котором вы собираетесь использовать карты от google. Вводить весь путь к странице необязательно, достаточно указать доменное имя сайта. Если вы собираетесь для начала отлаживать тестовую версию на локальном веб-сервере, то можете со спокойной душой ввести в этом поле «http://localhost», вообще, вы можете на один google-аккаунт получить несколько API-ключей для работы с различными урлами. Не стесняйтесь, денег за это никто с вас не возьмет.
В результате этих операций вы получите длинную символьную строку, нечто вроде этого: ABQIAAAA0O8WpTAV74EwpOYF7DnLmxT2yXp_ZAY8_ufC3 CFXhHIE1NvwkxTqolPNY6dTVRyrkNKATBVv2oLB1A, которую сохраните пока в какой-нибудь текстовый файл, она вам еще пригодится.
На той же странице, где вы получили свой API, ниже можно увидеть текст JavaScript’а, который вы можете использовать на ваших страницах, на которых планируете отображать карты google. Он выглядит приблизительно так:
key=ABQIAAAA0O8WpTAV74EwpOYF7DnLmxT2yXp_ZAY8_ufC3CFXhHIE1N vwkxTqolPNY6dTVRyrkNKATBVv2oLB1A type=”text/javascript”></script>
Этот скрипт загружает сам движок maps.google. Его нужно вставить в секции <head> тех страниц, на которых вы планируете отображать карты.
Ну а вот собственно разметка страницы со встроенной в нее картой:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Пример API Карт Google на языке JavaScript </title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
На этой странице присутствуют следующие элементы:
- DIV map_canvas, который собственно и будет содержать карту. Карта будет иметь ровно те размеры, что были заданы этому DIV’у до инициализации карты. Кстати, размер карты можно изменить и после инициализации, но при этом после изменения размера контейнера нужно вызвать для объекта map метод checkResize().
- Как видим в событии onload объекта BODY стоит вызов функции initialize(), которая объявлена выше.
- Функция initialize() сначала проверяет, совместима ли версия браузера пользователя с картами google и если все в порядке, то создается объект map типа GMap2, в конструктор которого в качестве параметра передается объект-контейнер, то есть тот самый DIV, о котором шла речь в пункте 1. Затем центр карты устанавливается в некоторые координаты, чтобы пользователь увидел перед собой не бескрайнее синее море, а некий осмысленный объект. В функцию setCenter передаются два параметра: координаты центра в виде объекта GlatLng(широта, долгота) и начальный масштаб карты, чем ближе это число у нулю, тем большая часть мира поместится на экране пользователя, чем больше это число тем подробнее пользователь увидит требуемый район карты. Максимальное значение масштаба 19.
- В методе onunload объекта BODY вызывается функция GUnload(), которая корректно освобождает все ресурсы браузера, занятые под отображение карт.
- И не забудьте вместо значения key=abcdefg вставить свой собственный API key, иначе работать ваша карта не будет.
Ну что ж. В результате выполнения этого урока вы создали веб-страницу с внедренной в нее картой google, которую вы можете просмотреть при помощи мыши, используя обычный Drag’n’Drop, изменение масштаба карты осуществляется с помощью двойного щелчка на карте: левой кнопкой – приближение, правой кнопкой – отдаление.
В следующем уроке мы узнаем, как сделать работу с картой более удобной, научимся менять ее вид (спутниковая, географическая) и кое-что еще.