Web 2.0 HotMonitor Blog

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