jMaps

Я вообще стараюсь не писать о том что морально устарело или больше не поддерживается, но сегодня именно такой случай. Я хочу рассказать вам об одном очень хорошем плагине для работы с гуглокартами под названием jMaps. Его исходники доступны на жыдхабе, но к сожелению их никто не обновлял с 17 сентября 2009 года. Один из авторов digitalspaghetti тоже пропал с сентября. В общем жыдхаб это единственная живая ссылка на проект, не считая репозитория плагинов jquery :( Если кто-то располагает хоть какими-то знаниями относительно более свежих версий очень прошу в каменты. А пока я буду рассказывать о том чего я накопал в коде.

UPD это все не актуально с выходом Google Maps API v3, примеры больше не работают, репозиторий сдох, а автор пропал :(

А накопал я много чего интересного. Оказывается, сам по себе плагин составляет три с половиной строки кода вокруг объекта Mapifies


(function($){
	$.fn.jmap = function(method, options, callback) {
		return this.each(function(){
			if (method == 'init' && typeof options == 'undefined') {
				new Mapifies.Initialise(this, {}, null);
			} else if (method == 'init' && typeof options == 'object') {
				new Mapifies.Initialise(this, options, callback);
			} else if (method == 'init' && typeof options == 'function') {
				new Mapifies.Initialise(this, {}, options);
			} else if (typeof method == 'object' || method == null) {
				new Mapifies.Initialise(this, method, options);
			} else {
				try {
					new Mapifies[method](this, options, callback);
				} catch(err) {
					throw Error('Mapifies Function Does Not Exist');
				}
			}
		});
	}
})(jQuery);

Что сказать, хорошо сделанная обертка, кроме одной меленькой детали. Все методы объекта Mapifies за редким исключением получают три параметра element (карта), options (опции), callback (функция), а возвращает результат работы callback(map). И вот как вы думаете как вы получите результат работы хоть какой-нибудь функции если обертка не предполагает возврата данных?!

Уже только по этому я решил отказаться от использования обертки и дальше работал с Mapifies напрямую. Документация по плагину крайне бедная, но код очень хорошо документирован, поэтому не составляет труда в нем разобраться. Продемонстрирую несколько простейших функций:

Создание резиновой карты, растягивается за нижний правый угол. Осторожно если сильно потянуть вправо то потом ее обратно уже не сжать, зато в любой момент можно растянуть вниз на практически любую длину.


jQuery(function($){
    var $map = $("#map1"),
    GMap = Mapifies.Initialise(
         $map.get(0),  {
            // описание всех параметров смотрите в коде плагина
            // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L100
            language: 'en',
            mapType: G_HYBRID_MAP,
            mapCenter: [50.440951,30.527181],
            mapZoom: 10,
            mapControl: 'large',
            mapEnableDragging: true,
            mapEnableScrollZoom: true,
            mapShowjMapsIcon: false
        }, function(thisMap){
            return thisMap;
    });

    $map.resizable({
        stop: function(event, ui) {
            Mapifies.CheckResize($map);
        }
    });
});

Теперь покажу как добавить маркер


jQuery(function($){
    var $map = $("#map2");
    Mapifies.Initialise(
         $map.get(0),  {
            // описание всех параметров смотрите в коде плагина
            // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L100
            language: 'en',
            mapType: G_HYBRID_MAP,
            mapCenter: [50.440951,30.527181],
            mapZoom: 10,
            mapControl: 'large',
            mapEnableDragging: true,
            mapEnableScrollZoom: true,
            mapShowjMapsIcon: false
    });
    Mapifies.CreateMarkerManager($map,{markerManager: 'MarkerManager'});
    Mapifies.AddMarker($map,{
        // описание всех параметров смотрите в коде плагина
        // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L704
        pointTitle : 'Tooltip',
        pointLatLng: [50.440951,30.527181],
        pointHTML: '<strong>description</strong>',
        pointOpenHTMLEvent: 'click',
        pointIsDraggable: true,
        pointMinZoom: 0,
        pointMaxZoom: 17,
        pointIcon:Mapifies.createIcon({
            // описание картинок смотрите в моей прошлой статье
            // http://mabp.kiev.ua/2010/01/12/google-map-markers/
            iconImage: 'http://maps.google.com/mapfiles/arrow.png',
            iconShadow: 'http://maps.google.com/mapfiles/arrowshadow.png',
            iconSize: new GSize(39,34),
            iconShadowSize: new GSize(39,34),
            iconPrintImage: 'http://maps.google.com/mapfiles/arrowie.png',
            iconMozPrintImage: 'http://maps.google.com/mapfiles/arrowff.png',
            iconTransparent: 'http://maps.google.com/mapfiles/arrowtransparent.png'
        })
    });
});

С этим примером тоже почти все хорошо кроме двух вещей.

Первая это нельзя заменить крест под маркером (во время перетаскивания). Он немного не по размеру этому маркеру (чуть чуть левее чем надо), но чтобы заменить его нужно отказаться от метода createIcon и создать маркер вручную.

Вторая… Если посмотреть код страницы видно что я подключил скрипт markermanager.js, он помогает при работе с маркерами, довольно неплохая вещь. Плагин умеет его использовать и если он подключен создает маркеры с его помощью. Но создавать создает а удалять забыват ;( Тоесть чтобы удалить маркер нужно вместо


    $("#remove1").click(function(){
        var manager = Mapifies.MapObjects.Get($map).MarkerManager;
        Mapifies.RemoveMarker($map,manager.getMarker(50.440951,30.527181,1))
    });

Написать


    $("#remove2").click(function(){
        var manager =  Mapifies.MapObjects.Get($map).MarkerManager;
        manager.removeMarker(manager.getMarker(50.440951,30.527181,1));
    });

Ага, вот сейчас вы нажали первую кнопку и подумали что я вас обманываю, нет попробуйте позумить, маркер никуда не пропал. Зато если нажать на вторую кнопку маркер пропадает начисто.

Я думаю на сегодня все. кто знает что-то об авторе, свежих версиях, документации и тд и тп пишите в каменты.

6 Комментарии “jMaps

  1. Интересно-интересно… Правда здесь API v2, насколько я понял? :(

  2. На маркер можно было попчик повесить ;) с надписью или координатами например ;)
    и да, нужно исп. посвежее вещи ;)

  3. Привет какая судьба этого дела??
    Я вот хочу прикрутить к своему проекту карты но пока только начинаю разбираться как это все работает.
    При чем тоже интересно использовать JQuery а не прототип.

  4. плагин похоже загнулся :((( но если честно этот плагин не к месту, все что он делает это делегирует методы карты, а сейчас APIv3 прекрасно делает свою работу.

    Единственно что я написал свой marker manager, вместо родного гуглового

    будут траблы обращайся

  5. Товарищ digitalspaghetti помер забрав с собой репозитарий на github
    Поэтому теперь плагин лежит тут

Комментарии закрыты