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

flickr google maps RSS web 2.0

С помоща на новото приложение може да се визуализира графична, видео и географска информация в Google Maps. За демонстрация активирайте сините маркери за Flickr GeoRSS, Picasa RSS и зелемите за видео презентациите на KML във widget.

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

$(’#map’).jmap(’addFeed’, {feedUrl:’http://digitalspaghetti.me.uk/myfeed.kml’});

$(’#map’).jmap(’init’, {mapCenter:[40.755319574776024, -73.99738311767578], mapType:’hybrid’}, function(el, options){
$(el).jmap(’addFeed’, {feedUrl:’http://www.hotmonitor.org/wordpres/feed’}););

Приложение
За ефективна презентация на графични изображения (Flickr, Picasa) в web 2.0 приложения и Google Maps;
За създаване на атрактивни web 2.0 Mashup интегриращи GeoRSS, Enterprise RSS, видео и аудио информация;
За ефективна промоция на корпоративно продуктово портфолио посредством Entrprise RSS
Предимства
Лесна инсталация и бързо създаване на web 2.0 mashup с визуализация на графични обекти, GeoRSS и Enterprise бюлетини ;
Интеграция с помоща на jQuery библиотека с отворен код и включване на микроформати;
Създаване на динамични обекти (маркери, полигони, линии) с използуване на видео и графична информация;
web 2.0 : Google Maps
API key: Google API Maps
Координати: Getlatlon.com
Flickr: Photo Sharing
JQuery: Документация
RSS за WP : GeoRSS
Tags: web 2.0, flickr, google maps, jQuery, mashup, rss, wordpress, блог

google maps web 2.0 wordpress

Какво е Google Map Search Wizard?
Приложението Google AJAX Search API Wizard e географска карта (HTML формат) с търсенe за интеграция на карта във Wordpress блог илиweb 2.0 приложение.

Как да инсталирамe Google Map?
Генерирането на HTML карта протича в следните стъпки:

1. Посетете следния Google адрес:
2. Попълнете информацията за корпоративната географска информация, zoom, адрес на желаната локация, адрес на вашия домейн.
3. На следваща стъпка генерирайте JS код който поставете във вашия Web 2.0 Блог. Това е всичко.
4. Не забравайте да си вземете Google API key за вашия домeйн
   

Втори начин за инсталиране на карта във WordPress блог:
Поставете HTML адреса във widget който интегрирайте в блогa. Вижте демото по горе. Въведете желан адрес за да се уверите, че картата работи.
Demo HTML :HotMontor Search Map
Tags: web 2.0, ajax, google-maps, wordpress, блог

google maps jQuery web 2.0

Въведение
От предишните публикации се научихме как Създаваме Маркер във Web 2.0, да създаваме Полигон, и да наслагваме графично изображение върху географска карта с помоща на Google Maps и jQuery . С този пост ще покажем как може да навигираме елегантно стъпково посредством линкове със желана зададена стъпка за прецизиране локацията на маркер или географски обект. За демонстрация активирайте линковете във widget.

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

(function($){
  $('#map').jmap('init', {mapCenter:[55.958858,-3.162302]}, function(el, options){
    var x = options.mapCenter[0];
    var y = options.mapCenter[1];
    $('.just-move').click(function(){
      x = x - parseFloat('0.05');
      y = y - parseFloat('0.05');
      $(el).jmap('moveTo', {mapCenter: [x,y]});
    });
    $('.pan').click(function(){
      x = x - parseFloat('0.05');
      y = y - parseFloat('0.05');
      $(el).jmap('moveTo', {mapCenter: [x,y], centerMethod: 'pan'});
    });
    $('.change-map').click(function(){
      x = x - parseFloat('0.05');
      y = y - parseFloat('0.05');
      $(el).jmap('moveTo', {mapCenter: [x,y], mapType : 'hybrid'});
    });
  });
})(jQuery);

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

google maps jQuery web 2.0

Въведение
От публикация Създаване на Маркер във Web 2.0 се научихме как да създаваме географска карта с помоща на Google Maps и jQuery. С публикацията ще поставим полигон върху географска карта във web 2.0 приложение. С този метод нa jQuery онагледяваме област или полигон от географска карта във web 2.0 приложение. Вижте примера във widget.

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

 (function($){
 $('#map').jmap('init', {mapCenter:[55.958858,-3.162302]}, function(el, options){
    $(el).jmap('addPolygon', {
      polygonPoints: [
        new GLatLng(55.958858,-3.162302),
        new GLatLng(55.968858,-3.162302),
        new GLatLng(55.968858,-3.152302),
        new GLatLng(55.958858,-3.152302),
        new GLatLng(55.958858,-3.162302)
      ],
      polygonFillColor: '#00ff00',
      polygonStrokeColor: '#ff0000',
      polygonFillOpacity: 0.5
    });
  });
})(jQuery);

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

google maps jQuery web 2.0

Въведение
От публикация Създаване на Динамичен Маркер във Web 2.0 се научихме как да създаваме географска карта и динамичен маркер с помоща на Google Maps и jQuery . С този пост ще поставим графично изображение (лого) върху географска карта във web 2.0 приложение . Този метод на jQuery ни помага за онагледяване на корпоративна презентация или промоция във web 2.0 приложение. Вижте примера във widget.

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

(function($){ $('#map').jmap('init', {mapCenter:[40.765641,-74.139235]}, function(el, options){
$(el).jmap("addGroundOverlay", {
overlaySouthWestBounds: [40.716216,-74.213393],
overlayNorthEastBounds: [40.765641,-74.139235],
overlayImage: "http://www.hotmonitor.org/bcenter/image/bp1000.jpg"
});
});})(jQuery);

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

jQuery web 2.0

Въведение
Географските карти са много полезен инструмент за онагледяване на корпоративно портфолио (офиси, продукти, персонал) във web 2.0 приложение. Интегрирането на Google Maps API и jQuery позволяват да правите атрактивни презентации във web 2.0 сайт или wordpress блог. Вижте демото във widget.

Инсталиране
Свалете jQuery от следния адрес. Не забравайте да си вземете Google API key за вашия домeйн и гео кординатите на обектите за визуализация.

Код за маркера

(function($){
  $('#map').jmap('init', {mapCenter:[55.958858,-3.162302]}, function(el, options){
    $('.clickme').click(function(el){
      $(el).jmap('addMarker', {pointLatLng:[55.958858,-3.162302]});
    });
  });
})(jQuery);

Приложение
За визуализация на обекти посредством динамични маркери;
За презентация на Enterprise RSS артикули;

Предимства
Бързо инсталиране и създаване на географски обекти в рамките на 4-5 минути; Динамична JQuery библиотека с отворен код;
Интеграция на бази данни и микроформати;
web 2.0 : HotMonitor Google Maps
API key: Google API Maps
JQuery: Документация
Tags: web 2.0, google, jQuery, wordpress, презентация

flickr RSS SlideShow web 2.0

Въведение

Предимства
Създаване на корпоративна презентация;
Пресонализиация по тагове GeoRSS;
Индексиране на изображенията във Flickr;
Лесна интеграция;

Допълнителни възможности
Синдикация посредством JCarousel;
Интеграция посредством WP плъгин;
SlideShow във web 2.0 widget;

Инсталиране
HTML кода може да си генерирате от следния адрес.
emb код може да получите от следния уеб адрес.
Поставете кода във блог публикацията или web 2.0 приложението.
Вземете си и id от Flickr.
Не забравяйте да филтрирате RSS емисията по тагове.
Това е всичко. Наслаждавайте се.

Демо примери
За демонстрация посочете с мишката в най-горе или най-долу в SlideShow
Tags: web 2.0, flickr, jCarousel, rss, SlideShow, wordpress, блог