Hi, this code doesnt work for me. I think google maps api has changed too much. is there an updated version? thanks!
Disclaimer: Accessing the information on this page means you agree to the Sites Terms of Service
<iframe> tag. This method is MUCH easier to do, plus, with the ability to sign-in and save your own maps, you can put detailed information related to your map location!Using the <iframe> method, you can also embed the google maps using the Greybox Redux module which opens a webpage in a box similar to how Lightbox V2 and Thickbox opens an image in a new window.
Read on though if you are still curious on how to embed Google Maps into Drupal with PHP!
I maintain a site for an individual who has a physical store location. I decided one day back in May 2007 to put the Google Maps API onto his site, so I set it up complete with lat/long coordinates and a marker with his address. It worked fine in FireFox and I didn't look back. Until July 2007...
I moved the core of Drupal from /index to / and in the process of making sure everything worked, I realized I needed to change the API key for the Google map. (I don't exactly know why, It just told me I needed to change it...) No big deal, I just registered for the new key, plugged it in and submitted the node page.
Well, apparently, back in May, I forgot to verify that it worked in IE, because it decided not to work after the move... I then tested IE6 to no avail... I spent about 30 min. searching Google before running across a Google Groups article that basically said 'IE' doesn't like more than than one <body> tag. Well, I had just used the recommended Google code specified for an html page:
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 400px; height: 300px"></div>
</body>
(Drupal outputs it's own <body> tag through the template, so using the default Google code, added an additional <body> tag. Firefox and the other compliant browsers just ignore it, but IE gets all confused, throws a fit and just doesn't display the map. Typical MS stuff...)
Initially, back in May, I toyed with the Drupal Gmap Module, but I decided not to use it because it seemed a bit bulky and confusing. I spent more time trying to get that to work, than I did copying and pasting the code...
This go-around, I decided I would just see if I could create some sort of php code to push the 'onload' function to the <body> tag. Not knowing anything about php coding, this turned out to be a chore... I ran across and tried to implement: Phoogle Maps and GMapEZ, but these turned out to take more time to figure out than I wanted to spend time with. I did some more snooping (about 2.5 hrs worth, after trying different bits of code people suggested) and finally found a small snippet on this Drupal comment that I felt might work. I plugged the old code in along with the new and much to my surprise, a Google Map showed up! It even worked in both Firefox and IE7! (and IE6, but who uses 6? :p Ok, fine... about half of my website clients still do...) I immediately decided to blog my findings in hopes that it helps someone else out there who doesn't code, but is usually able to tinker with other's code to make it work.
In summary, this code might be used for the following situations:
(Note: I do not guarantee this code will work for you in your setting, I hope it helps though)
If you are using Drupal, be sure to set your node 'Input Format' to 'PHP Code'. You should be able to copy the following code, add your API and change the code to reflect what you want it to do. (Click here for an example of the following code)
You can also find a live site example at protruckautoandequipmentsales.com
Note: The following code is for Drupal 6. For Drupal 7, change:
drupal_set_html_head -> drupal_add_html_head
<?php print ('<div align="center"><b>Address:</b> 123 Kansas Ave., Wichita KS</div><br/><br/>'); ?>
<?php
drupal_set_html_head('<script src="http://maps.google.com/maps?file=api&v=2&key=change_this_to_your... type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.687081,-97.335434), 9);
map.openInfoWindow(map.getCenter(), "<b>Address:</b> Address & Street" + "<br>Wichita, KS 67000" + "<p><b>Phone:</b> (123) 123-1234");
}
}
//]]>
</script>
<script type="text/javascript">
window.onload = function() {
load();
}
window.onunload = function() {
GUnload();
}
</script>');
?>
<?php print ('<div align="center"><div id="map" style="width: 640px; height: 400px"></div></div>'); ?>
Hi, this code doesnt work for me. I think google maps api has changed too much. is there an updated version? thanks!
the pointer not show this code
Thanks, this article helps me :)
and also it's possible to use:
<CODE>
//here your javascript code
</CODE>
php features for including raw data to php variable, which later you can add to header with
drupal_add_html_head function (D7 use drupal_add_html_head instead of drupal_set_html_head)
The GUload function should be GUnload, otherwise throws a js error
after test of various projects, only this works well for me.
thanks.
Bit of fiddling around to get the map settings I wanted, but this solution works fine and saves adding a module for the sake of a single map.
Thanks.
Dave
thanks!
exactly the information i needed.
PS does anyone know how the above example would look if i wanted to put the CDATA block in a seperate file and reference that file instead?
i had to move a function myclick to oustide the onload function to get it to work and want some way to work out which variable is being referenced where etc.
thanks.
Is there a way to replace the latitute and longitute values in your code, with values from php variables?
Thank you. I have a directory of addresses. When a user searches, I needed to be able to read the address out of the database, and generate a googlemaps with that address. GMaps and the Location module don't do that, so I found a non-module way to get a lat/long value.
Now with this snippet, I can just simply replace your lat/long values with the said generate values.
Perfect.
Thank you. A lot.
First, I had put this on my Drupal 6 installation before, not like this I don't remember, but this works a lot better in my opinion. Thank you so much, and it beats having to wait longer. Every search I pulled until I dug deeper to these pages kept only mentioning GMap module.
Well, like I said, I had it working before without a module, but we had recently switched our hosting providers due to having to switch our main telephone line provider as well, and I backed up the site. But I backed the site up to a computer that was getting a warranty repair and I didn't think about it until it was already too late. Bad disk to mention it. But hey, you're a life saver tonight, thanks!
Sincerely,
Matthew
Is there a way to do this with drupal7 as well..with drupal6 its working fine but with drupal7 it doesnt work..is there some other way to solve this
Thanks phil. Took few days untill I stumbled upon your hints. Tried to avoid gmap module and now you made it possible.
Just wanted to say a huge thank you for posting this code.
I have recently been learning Drupal and have a little experience in creating Google Mash Ups but was really struggling to integrate the two!
This works like a dream and far simpler than a lot of the other options I tried.
Thanks heaps,
Dave (Australia)
Post Comment