By AdrianB on

I've been trying to get Google Maps to work on a Drupal page (not using the GMap module since it seemed overkill for just one page), but an error keeps coming up. I've searched drupal.org and the Google Maps discussions but found no answer to this problem:

When I use Google Maps example code to load the map it works:

<body onload="onLoad()">

But in Drupal 5.x I'm supposed to use jQuery to add events like this (afaik):

if (Drupal.jsEnabled) {
	$(document).ready(onLoad());
}

This, however, does not work. I get an error saying "a has no properties" which means something is messed up in the Google Maps js (thus the Google Maps js is at least loaded).

I have two stripped down example html pages, on with the onload (and working) map and one with the jquery change (and not working):

http://brf.skidbacken.se/test_gmaps_onload.html
http://brf.skidbacken.se/test_gmaps_jq.html

Anyone has a clue why the jQuery version doesn't work? Have I misunderstood the use of $(document).ready()?

⋅ Categories: Drupal 5.x

Comments

AdrianB’s picture

AdrianB commented

I just realized I'm using the old API, v1, from Google. I'll try v2 and see if that solves my problems.

AdrianB’s picture

AdrianB commented

No, that didn't work either:

http://brf.skidbacken.se/test_gmaps_v2_jq.html

nevets’s picture

nevets commented

I recently finished a module that uses the google map API and the PHP code that spits out the javascript looks like

// Code needs to set $lat and $lon (center of map)
// Also orginal code has additional code that sets $js
// for markers on the map
$start_js = <<<JS
					
var searchMap = new GMap2(document.getElementById("searchMap"));
searchMap.addControl(new GSmallMapControl());
searchMap.addControl(new GMapTypeControl());
searchMap.setCenter(new GLatLng($lat, $lon), 13);

JS;
// You need to set $key to your google map key
$key = "some key";
drupal_set_html_head('<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key='.$key.'" type="text/javascript"></script>');
drupal_add_js($func_js . "\n$(document).ready(function() {\n" .$start_js . $js . "\n});\n", 'inline');

The resulting javascript looks like 

$(document).ready(function() {
var searchMap = new GMap2(document.getElementById("searchMap"));
searchMap.addControl(new GSmallMapControl());
searchMap.addControl(new GMapTypeControl());
searchMap.setCenter(new GLatLng(54.34, 34.12), 13);
});
AdrianB’s picture

AdrianB commented

Thanks for the answer, I'll try that and report back later.

AdrianB’s picture

AdrianB commented

Thanks a lot nevets, I used your code and it worked just fine! I've yet to understand why my code didn't work but I'm happy now.

(I will probably delete the examples above soon, since I found a working solution.)

AdrianB’s picture

AdrianB commented

Btw, do you use the GUnload() call? If you do, then how?

nevets’s picture

nevets commented

I think if your code also outputs this javascript it will work (untested though)

$(document).unload(
  function() {
    GUnload();
  }
);
jdl100’s picture

jdl100 commented

I'm new to Drupal. I've used jquery on non-Drupal pages. If I create a new page and I want to call something like

$(document).ready(function() { var searchMap = new GMap2(document.getElementById("searchMap")); searchMap.addControl(new GSmallMapControl()); searchMap.addControl(new GMapTypeControl()); searchMap.setCenter(new GLatLng(54.34, 34.12), 13); });

where does this code belong?

If I add it to the page text and make the page input type php, does the PHP template engine parse through the code that I've added and put the code within the

tags in the part of the page? Or should I be adding this to some other place in the code? Is there a good tutorial that gives a complete example of using a jquery plugin in Drupal that shows where to add all of the different pieces of code? Thanks, jdl
vshih’s picture

vshih commented

You are passing the result of the onLoad() function call. Rather, you should pass the function itself, like so:

$(document).ready(onLoad);

--
Victor Shih
www.vicshih.com