Web 2.0 HotMonitor Blog

google maps jQuery web 2.0

Въведение
От предишните публикации научихме Как да Създаваме Динамичен Маркер, Как да Създаваме Полигон, Как да Създаваме на Изображение в карта и Как да правим елегантна стъпкова навигация във Web 2.0 Приложение. С настоящата публикация ще покажем как може да измерваме разстоянието от точка до точка с помоща на Google Maps и jQuery. Услугата е много полезна за автомобилистите и показва детайлно най-късия и удобен маршрут между две точки. Визуализират се и алтернативнимаршрути и точки. Приложението се използува ефекивно и при мобилната навигация. Въведете в текстовите кутии 2 избрани точки примерно (Sofia и Plovdiv), (Sofia и Berlin), (Берлин и Лондон). След потвържедение се визуализира маршрута и разтоянието между точките. Страхотно нали. Нещо повече показват се всики алтернативни маршрути с линкове. Вижте примера във widget.

Инсталиране
Свалете jQuery от уеб адрес. Вземете Google API key за вашия домeйн. Кординатите ан картата може да вземете от Getlatlon.com. Поставете HTML код във web 2.0 приложението където искате да се вузуализра географската карта.

Code

(function($){
  $('#map').jmap('init', {mapCenter:[55.958858,-3.162302]}, function(el, options){
    $('.submit').click(function(){
      $(el).jmap("searchDirections", {fromAddress: $('#from').val(), toAddress: $('#to').val(), directionsPanel:"directions"});
    });
  });
})(jQuery);

Приложение
За ефективно измерване разстояние между географски точки във web 2.0 приложение или мобилен телофон;
За създаване на атрактивни web 2.0 приложения;
Предимства
Лесна инсталация и малък код 6 kb за създаване на web 2.0 географска карта;
Ефектна jQuery библиотека с отворен код и интеграция на микроформати;
Интеграция на динамични обекти в Google Maps (маркери, полигони, линии);
web 2.0 : Google Maps
API key: Google API Maps
Координати: Getlatlon.com
JQuery: Документация
RSS : GeoRSS
Tags: web 2.0, GeoRSS, google maps, jQuery, wordpress