Google Maps with Drupal 5.1
ray_223 - February 6, 2007 - 00:54
Hi,
I'm new to Drupal and so far have found it to be a very well structured piece of software. Congrats to all who have contributed.
The modules seem far more powerful and "connected" then other CMS's I've played with (i.e. Joomla).
Now ... I have a test site with Drupal 5.1 and I was wondering if there was a way to put a Google Map onto a node?
I just want to specify some basic starting details (hard coded) and the let the user play after it is shown.
GMap seems to be the answer but it doesn't currently have a version for 5.1???
Thanks,
Ray Smith
http://RaymondSmith.com
gmap is the answer, The
gmap is the answer, The version in head may be for Drupal 5. (Don't quote me on this).
There is a document floating around on how to update modules from 4.7.x to 5.x though if you don't have the skill set I don't suggest this.
filing an issue on the project to check 5.x status wouldn't be inappropriate, there may already be an Q&A about this with in gmaps issue query.
If you can't wait for gmap to be updated, Consider deploying a 4.7.x site until Gmap.module is indeed updated released and stable.
Definitely file a feature request
VM is right. How do the developers know if there's enough interest in doing a 5.x version? Check if there is already a request for a 5.x version first, but if not, definitely open one. I've done 3-4 so far.
Oh, yeah, then got to the "Recent Posts" here; you'll see another tab for "My Posts." When you get that page served up, bookmark it. That's an easy way to track what you've submitted.
Nancy W.
proudly running 3½ sites on Drupal so far
Thanks VM and Nancy. I had a
Thanks VM and Nancy.
I had a look at Pending feature requests .. and found nothing ... but found all the current info in Pending Patches:
http://drupal.org/node/99854
Thanks,
Ray Smith
http://RaymondSmith.com
simple gmap without the module
Here is how I did it on 4.7. I assume this would work on 5.1 as well. I wanted one simple gmap (basically a directions page telling readers how to get to our school). I don't know, maybe people are going to tell me I should have used the module, but... I felt I had enough modules to keep track of already!
First, create a file with your javascript. It could be as simple as the "hello world" example here:
http://www.google.com/apis/maps/documentation/#The_Hello_World_of_Google...
Or more complex. Mine has a function that adds a clickable GMarker, that pulls up an info window with a "get directions" form.
Now, create a new page node for your map. Add the javascript file as an attachment. Then, set the node's input format to php. Add this code to the node's body to display the map:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAwaXXvLBFFkHdeftFkloZChQTbXpz5ceZaMEM7yZbia5X5RM15xQ8CA4K7i1fnnSuhpeo7XU1L6CGBA"></script>');
drupal_add_js("system/files/gmap_directions.js_0.txt", $nocache = FALSE);
?>
<div id="map" style="width: 523px; height: 320px; margin: 10px auto 0px auto;"></div>
Of course, change the API key, javascript file, and div styles to suit. If you are wondering why I used drupal_set_html_head, and not drupal_add_js, it's because the latter doesn't seem to work for external URLs, it expects a relative path and adds a leading slash if I remember correctly.
You can see my page here:
http://www.scattergood.org/node/19
Good luck!
RE: simple gmap without the module
Dylan, any chance you might post a sample of your first file?
Hi Dylan, Thanks for the
Hi Dylan,
Thanks for the idea.
(I'm a Drupal newbie) and have tried implementing your suggestion but couldn't get it to work. It just displays an empty area where the map should be.
Here is what I have done:
Created a new page with:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAVJpoGgglclfmSCPASVgpAhTW9y7W6Vk0bsZQ0fHcxhP3gF09NxTfF-I_2dVGlnL-x458eI_x-xrtzQ"></script>');
drupal_add_js("http://raymondsmith.com/drupal/gmap_directions.js_0.txt", $nocache = FALSE);
?>
<div id="map" style="width: 523px; height: 320px; margin: 10px auto 0px auto;"></div>
Then cppied your "gmap_directions.js_0.txt" to my website at: http://raymondsmith.com/drupal/
Is there anything obvious I have missed?
Thanks,
Ray Smith
http://RaymondSmith.com
RE: simple gmap without the module
Hi Ray,
Two things jump out. In the code sample you posted, the API key hasn't been changed. You have to request your own key from
http://www.econym.demon.co.uk/googlemaps/basic4.htm
Second, your drupal_add_js call uses an absolute path. Maybe this works in 5.1, but on my site I used a relative path. "View Source" in your browser, and verify that the javascript path is correct.
I should also point out that my "get directions" code was borrowed from here:
http://www.econym.demon.co.uk/googlemaps/basic4.htm
jks – feel free to reuse the code from my site – just do a "view source" on
http://www.scattergood.org/node/19
Hi Dylan, Thanks for the
Hi Dylan,
Thanks for the reply.
If you look close the API key is different ... just the first few characters are the same.
The relative paths didn't seem to work either.
It's ok, I'll probably just wait for GMap to be ready. I'm just playing at the moment and there is no hurry.
Thanks again, your help is very much appreciated.
Ray Smith
http://RaymondSmith.com
addLoadEvent in 5.1
looks like 5.1 got rid of the addLoadEvent function. I can't find it defined in any of my drupal include files. I'm working on a way around this, will post it when I come across it
Jule
--
www.worcesterjudo.com
use $(document).ready() instead
Just got bit by this, upgrading to Drupal 5.1. addLoadEvent is no more.
To fix this, replace
<?phpaddLoadEvent(initmap);
?>
<?php$(document).ready(initmap);
?>
http://raymondsmith.com/drupa
http://raymondsmith.com/drupal/gmap_directions.js_0.txt -> 404 :(
Big THANKS for this tip.
Big THANKS for this tip. I was fooling around with a 5.1 site, and didn't want to go with a full blown module for just one map. - I'm a relatively new to this and didn't know how to add the script files to the document head. It worked perfectly first try.
Update - On second thought,, it worked perfectly on a 4.76 site. When I tried it on a 5.1 the drupal_add_js call didn't seem to make it to the page header - I tried using drupal_set_html_head and it makes it to the header, but the after much futzing with the url (sites/sitename.com/files) - it still isn't working - I'll continue to play and update if I can get it to work.
OK - FINALLY - It seems the drupal_add_js function has changed a bit in version 5. By removing the $nocache = FALSE from your code it now seems to work fine in my 5.1 site. (I expect the default setting of $cache = TRUE in the 5 version of this function is equivalent)
trying simple gmap without module
I'm using Drupal 5.1 and have followed your instructions but can't get it to work.
This is the code in the body of my map page:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAobNmHrs3ouy-IQCPDZ0pXRTcY9LqH73QXQ0B2n004TMXZE7o8RRPjY6lz7nEQhsMJxUdDjb7e3AsqQ">
</script>');
drupal_add_js("files/gmap_directions.js_0.txt")
?>
I took out the $nocache after reading one of the other posts, changed the API key and copied your javascript file into my files directory (changing the latitude and longitude only).
I've selected 'php input format' for my map page.
Any ideas?
Thanks very much.
simple gmap without the module
Is it working for 6.x ?
----
Darly
Anyone placed a googlemap inside an interface floating window?
Hi All;
I have an INterface floating window which Im trying to get a googlemap inside of. it works, but the actual map display is all messed up (actual map ends up being a tiny little rectangle in the upper left corner) and i can't fix it. Im posting code here in hopes that someone can understand why this is messing up.
initializing the map in jquery:
$output .= "<script type=\"text/javascript\">//<![CDATA[
$(document).ready(function() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(\"windowContent\"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
});
//]]>
</script>";
this is the jquery for the interface floating window:
<script type=\"text/javascript\">$(document).ready(
function()
{
$('#windowOpen').bind(
'click',
function() {
if($('#window').css('display') == 'none') {
$(this).TransferTo(
{
to:'window',
className:'transferer2',
duration: 400,
complete: function()
{
$('#window').show();
}
}
);
}
this.blur();
return false;
}
);
$('#windowClose').bind(
'click',
function()
{
$('#window').TransferTo(
{
to:'windowOpen',
className:'transferer2',
duration: 400
}
).hide();
}
);
$('#windowMin').bind(
'click',
function()
{
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
$('#window').animate({height:40},300).get(0).isMinimized = true;
$(this).hide();
$('#windowResize').hide();
$('#windowMax').show();
}
);
$('#windowMax').bind(
'click',
function()
{
var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
$(this).hide();
$('#windowMin, #windowResize').show();
}
);
$('#window').Resizable(
{
minWidth: 200,
minHeight: 60,
maxWidth: 700,
maxHeight: 400,
dragHandle: '#windowTop',
handlers: {
se: '#windowResize'
},
onResize : function(size, position) {
$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
if (!document.getElementById('window').isMinimized) {
windowContentEl.css('height', size.height - 48 + 'px');
}
}
}
);
}
);
</script>";
this is the html which invokes the Interface floating window:
<div id="window"><div id="windowTop">
<div id="windowTopContent">Google Maps</div>
<img src="images/window_min.jpg" id="windowMin" />
<img src="images/window_max.jpg" id="windowMax" />
<img src="images/window_close.jpg" id="windowClose" />
</div>
<div id="windowBottom"><div id="windowBottomContent"> </div></div>
<div id="windowContent">
</div>
<img src="images/window_resize.gif" id="windowResize" />
</div>
<br><a href="#" id="windowOpen">Directions</a>
There's a plugin from WordPress, said to be working with Drupal
This is a plugin for WordPress, but within the page, it says this can also be used externally. Has anyone from Drupal got something using this? Or might this help upgrading current plugin to work with 5.1?
http://avi.alkalay.net/2006/11/google-maps-plugin-for-wordpress.html
Did anybody use this on drupal gmap?
Hi,
Did anybody use this plugin on Drupal?
Please respond.
Thanks in advance,
greetings,
Martijn