Hi,

I've been struggling with gmap module. My target is to create a map block where user can drag own location and see markers nearby. I thought the following steps would be enough:
1) enable the locpick functionality so user has something to drag
2) create a js file to react dragend notifications by removing current markers and requesting new markers from my module
3) use addOverlay in ajax sucess callback funtion to add received markers

And then the problematic code:

var lati = 0;
var longi = 0;

/* This will be executed for the first time after map has been initialized*/
Drupal.gmap.addHandler('gmap', function(elem){
    var obj = this;
    obj.bind('locpickchange', function(){
        console.log("latitude " + obj.vars.latitude + " long " + obj.vars.longitude);
        lati = obj.vars.latitude;
        longi = obj.vars.longitude;
        //getMarkers();
    });
});

// this is my custom code to react just dragend notifications
// to enable this I needed to hack locpick.js a bit
Drupal.gmap.addHandler('gmap', function(elem){
    var obj = this;
    obj.bind('locpickchange_dragend', function(){
        // to prevent zoomIn after dragend as locpick.js calls zoomIn twice after dragend
        obj.map.zoomOut();
        obj.map.zoomOut();		
        console.log("drag end latitude " + obj.vars.latitude + " long " + obj.vars.longitude);
        lati = obj.vars.latitude;
        longi = obj.vars.longitude;
		
        var mymap = Drupal.gmap.getMap('my-map');
        var mymapmarkers = mymap.vars.markers;		
        for (i=0;i<mymapmarkers.length;i++)
        {
            console.log( mymapmarkers[i].opts.title);
            // what is correct way to delmarkers? How to use function defined in gmap module?
            //obj.map.removeOverlay(mymapmarkers[i].marker);
        }
        
       //here I tried to pass mymap as parameter but it didn't work either
       obj.getMarkers();
    });
    
    this.getMarkers = function () {
        $.ajax({
            type: 'POST', // Use the POST method.
            url: '/drupal/zzz/'+lati+'/'+longi,
            dataType: 'txt',
            error: function(){
                alert('Error loading XML document');
            },
            success: function(data){
                var result = Drupal.parseJson(data);
                // loop received markers here and use addOverlay but for which object?
                // what is the correct way to addmarkers to map?
                console.log('reload block ' +result);			
             },
            data: 'latitude='+lati+',longitude='+longi  // not needed in callback
        });
    };    
});

So my questions are:

1) how I can access delmarker and addmarker funtions defined in gmap_marker.js
2) are there something else in my code that seem more like hacking instead of good js coding practises? :)

Comments

kolada’s picture

One comment:

If I do this:

var mapref = Drupal.gmap.getMap('my-map');
console.log(mapref);
console.log(mapref.map);

I get
Object vars=Object map=Object ready=true opts=Object
Object S=Object k=div#gmap-my-map-gmap0.gmap-control

mapref.map object is obviously "shrunk" meaning I cannot use addOverlay function.

I also found this but couldn't still make this work http://drupal.org/node/150939

Edit:

I just don't get it, why this works in addhandler when removing markers


var mymap = '';
...
Drupal.gmap.addHandler('gmap', function(elem){

...
		mymap = Drupal.gmap.getMap('my-map');
		var mymapmarkers = mymap.vars.markers;		
		for (i=0;i<mymapmarkers.length;i++)
		{
			console.log( mymapmarkers[i].opts.title);
			mymap.map.removeOverlay(mymapmarkers[i].marker);
		}

but when I'm adding markers in ajax success callback it will fail

for (i=0;i<result.markers.length;i++)
{
    console.log( result.markers[i].opts.title);
    mymap.map.addOverlay(result.markers[i]);
}

a.initialize is not a function
[Break on this error] J.prototype.ba=function(a){var b=this,c=...,Fh,function(i){H(b,Fh,a,undefined,i)});

beanjammin’s picture

kolada, thanks for posting this thread. It lead me to http://drupal.org/node/150939#comment-1285426 where I found the solution for referencing the gmap map object. It looks like we were trying to reference the object before it had been created.

johnv’s picture

Status: Active » Closed (won't fix)

Closing this very old issue. Please reopen if it is still valid.