Javascript - Get a pointer to the map object

I just committed some code to DRUPAL-5 to allow doing this.

Drupal.gmap.getMap(mapid);

You have to know the map id to retrieve it.

Your code would look like this:

var m = Drupal.gmap.getMap('locmap'); // Replace locmap with the map's id that you want
m.vars.latitude = lat;
m.vars.longitude = lon;
m.vars.zoom = 3;
m.change('move',-1);

Cool, I was looking for the same functionality and this works.

Now in my setup, I have a block in the right sidebar displaying the results from a view. So you see which markers are on the map also. I've implemented your code snippet and when I click on a title, I see the map moving to the right marker.

Would it be possible to then also open this marker's infowindow ?

Hi, after a couple of hourse of firebug digging I found out how to get to open the markers window.
So following on your code after the change, I added this:

m.vars.markers[count].marker.openInfoWindow(html);

count = id of marker;
html = html you want to display in this marker.

In my case, the id points to the exact marker, since the view results to the map or in my right sidebar are equal, so no problems for me here! The html is also passed via the onclick javascript function.

Pfew, glad I found this one out!

me too-- this looks like it will solve my related request of opening an infowindow in a node map linked from a node. Specifically relating to this solution, however, where does the Drupal.gmap.getmap js go? Custom node theme?

me too-- this looks like it will solve my related request of opening an infowindow in a node map linked from a node. Specifically relating to this solution, however, where does the Drupal.gmap.getmap js go?

i've created my own function in a javascript file which I included in my theme

function show_on_map(lat,lon,count,html) {
  var m = Drupal.gmap.getMap('view_gmap'); // view_gmap is my id, change it to whatever your map id is called
  m.vars.latitude = lat;
  m.vars.longitude = lon;
  m.vars.zoom = 5; // this can be anything from 0 to 17
  // count is id of marker, html comes encoded thanks to htmlentities function
  m.vars.markers[count].marker.openInfoWindow(html); 
  m.change('move',-1);
}

hope this helps!

Ahh.
No problem.

"I would like to be able to control the map via Javascript using the Google Maps API, but I can't figure out how to reference the map object."

I am having the same problem.

I believe Drupal.gmap.getMap('locmap') gives me a reference to gmap's map object, but not to the googlemap itself. I wouldn't need a reference to the googlemap itself if I could figure out how to to add a marker to the map using the gmap api. But I have not succeeded in figuring that out.

So I ended up hacking the gmap.js code, and added a function that returns a reference to the googlemap. I am hoping there is a better solution.

Is there a way to get a reference to the googlemap object without hacking gmap.js?

Or is there a way to add (and delete) markers using the gmap api?

Hi, I'm a newbie, but learning. So far, I have a map of events that shows markers on the map where events held at. But I like to have lists of events on the left table or div, and map on the right. So, if I click on one of the event, the corresponding marker will pop up. After reading this post, I think this is what I need? Can anyone give me some more instruction on implementing please? :) I searched everwhere on google and drupal past few days.

Do I make a js file with the function above and put it in my theme folder (currently ubiquity). Do I call the file or the function from template.php?

thanks

I am also having the same problem, when I use the code listed in this posting eg:

var m = Drupal.gmap.getMap("gmap--gmap0"); // gmap--gmap0 being the id of my map

the gmap object (m) is undefined.

I am not so good with JS so kobnim would it be possible for you to post or describe how you modified gmap.js so that you could access a reference to gmap object? that would really help me out.

thanks

Hi Andy,
Well, it's ugly, but here goes:

a. I added a variable to gmap.js which will be used to store a pointer to the googlemap object:

var googlemap; 

b. The googlemap object is created inside the function Drupal.gmap.addHandler():

 var map = new GMap2(elem);

Immediately after that line, I added this line, so that I could get my hands on the map from outside the function:

googlemap=map; 

c. Finally, I added the following function to gmap.js, so that I could get my hands on the map from outside the gmap.js file:

function get_the_googlemap(){
	return (googlemap);
}

As I said, it's ugly. Perhaps someone knows a better way?

- Mindy

+1 ... keen to see better than a patch (subscribing).

Great! thanks for your post mindy, ill give it a try and post back my findings.

@kobnim and @andyb82

I installed Gmap (alpha version) this morning and quickly got the m.blabla() is not a function issue.

The solution in that version I found was simpler than hacking the .js of the module:

this:

m = Drupal.gmap.getMap("gmap--gmap0");

returns something. m is not undefined.

but

m.addOverlay(...)

did not work.

However, this

m.map.addOverlay(...)

works.

hope it helps.

If you can't access the map object, it may be that it hasn't been initialized yet. You can tell by outputting the content of the object:

m = Drupal.gmap.getMap('YOURMAPID');
output = "";
jQuery.each(m, function(i, val) {
output += i + ":" + val + "\n";
});
alert(output);

If you see Map is undefined, you'll need to boot it like so:

m = Drupal.gmap.getMap('YOURMAPID');
m.change("boot",-1);

From here on out you should be able to access the map object.

whats the best way to find the map_id ? I'm just not sure if I'm looking in the right place.

Hi there,

The above method(s) don't work for me either. I can't output the content of the object as described. I really need access to the map to do a lot of custom interaction and event handling. I do want to implement GMap 100% as its javascript handlers (event handling system) develops and gets documented. Right now, if I can just use GMap for some of the basics and still be able to manipulate it with my scripts, I would be happy.

Appreciate any info regarding this in the meantime.

Thanks

Here is mine solution for getting map object that is initialized properly. For example I am using direction form with gmap and here is javascript for that:

...
function initialize() {
  if (GBrowserIsCompatible()) {
    var m = Drupal.gmap.getMap('gmap-id');
    if (m.map) {
      initDirection();
    }
    else {
      m.bind('ready', function(data) {
        initDirection();
      });
    }
  }
}

function initDirection() {
  map = Drupal.gmap.getMap('gmap-id').map;
  gdir = new GDirections(map, document.getElementById('directions'));
  GEvent.addListener(gdir, "load", onGDirectionsLoad);
  GEvent.addListener(gdir, "error", handleErrors);
}
...

and then somewhere in the code i have next couple of lines

$(document).ready(function(){
  initialize();
})

Hopes this will help somebody.

pivica, THANK YOU!!!!!

I'm finally getting somewhere with this :)

You obviously know what you're doing.

All the best!

pivica, let me 2nd what topwaters said. Thank-you very much!

pivica you are a life saver!!!

Re-centering, zooming, adding markers on the fly ... GMap works like a charm now.
Thanks for sharing your knowledge.

If anyone needs to remove or otherwise change the existing markers, remember to use the 'markersready' instead of 'ready'.

This way all GMarkers will be loaded in the m.vars.markers objects..

I hope this info can make someone happy..

Please let me know, if there's a better place for this kind of info..

subscribe

prinds++

If you're using Gmap from a View you'll have to wait for markersready instead of ready. Views is going to want to put its own markers down and rework the map a little bit so changes you make at 'ready' are going to be overwritten.

Closing since this was a 5.x support request.

Thank you, Pivica!!! It really helps!

#23 is very helpfull. It works. Thanks!

That was a lifesaver, especially Pivica's commentary. Cheers guys!

+1 @pivica

Thanks for this! I spent an hour troubleshooting this before finding this fix.

I changed my approach a bit with the following (adapting feedback in #27):

var gMap = Drupal.gmap.getMap('map-id');
gMap.bind('markersready',function(data){
  gMapInit = Drupal.gmap.getMap('map-id').map;

  //use gMapInit here... gMapInit.getCenter(), etc.

});

I guess it's really just a change in structure but seems to work well. I'm using the latest version of Chrome so I'm not sure what conditions have to be met for GBrowserIsCompatible() to be true...