September 24, 2008 - 10:31am
Google maps vs Calendar/date modules
great info Kwang!!! thanks for posting that.
So, would you recommend using the Google route for a calendar in Drupal (let's say a Church calendar), or use the Drupal Calendar/date modules? I'm just wondering about the benefits to each.
September 24, 2008 - 11:47am
Maps or Calendar?
I think maybe you're getting confused maximus (or maybe I am)...this tutorial is all about maps, having nothing to do with google calendar.
Did i miss something?
-Rob Feature
Geeks and God Co-Host
www.mustardseedmedia.com
September 24, 2008 - 12:35pm
arghh
woah! you're totally right. Sorry... I had been thinking about linking Google calendars in the past several days and when I saw this post, my mind interpreted Google maps for Google Calendar. How does that happen? am I losing it? anyway... thanks for the correction.
September 24, 2008 - 1:42pm
Map Controls
The code above will provide a dynamic map, but lacks a zoom-in and zoom-out feature. To add that functionality add this line to the code right above the GEvent line in the intialize function:
map.addControl(new GSmallMapControl());and just for even more fun, add this line if you want the ability to choose what type of map is shown (map, satelite, hybrid). Add this code in the same place as mentioned above:
map.addControl(new GMapTypeControl());I'll keep you guys updated as I learn more.
January 12, 2009 - 1:43am
March 26, 2009 - 10:48pm
iframe??
Hi Kwang, maybe I'm missing something here, but why not simply use the "embed" link that google maps provides, and embed that into your page?
I'm wanting to include a page on a church site which shows "where we are" and I started looking into some existing drupal modules for this, and then realized that I can simply embed the map into my page using the code supplied from google.
So I'm just curious - what additional benefit is there in using the google API and the associated drupal modules, or manually coding the map as you suggest here?
August 26, 2009 - 4:22pm
Multiple 'To:' Addresses possible??
Hi. I came across your tutorial while trying to figure out how to make this work. I gave it a try and it worked awesomely on my Drupal website. I just had one question. Would there be a way to make a drop down box that allowed for multiple addresses in the To: box ?? I am beginning to find multiple locations that I would like to give directions to and don't want to make separate maps if I can keep from it. Any help would be greatly appreciated. Thanks again for all that you have done.
December 10, 2009 - 12:30am
January 6, 2010 - 10:30pm
Google Map in a node
Hi there, I think you'll find your iframe tag will be stripped out by the input format filter and if you've managed to fix this then trying to edit the iframe tag may also cause problems. That said, that's as much as I know about this issue and if someone could clear it up for me also, that would be great.
November 7, 2010 - 4:17am
Embed google maps
I'm only just starting out with drupal but just used the 'embed google maps' module that uses CCK fields and was very happy with the result. You don't need the google API key either, just type in the address. It's completely interactive with zoom functionality.
April 18, 2012 - 3:25am
I am glad I found this post
I am glad I found this post even though it is out-of-date - I have only started using Drupal and have very little experience with it, so any tips are appreciated, and these ones are twice as helpful since I am a regular user of Google Maps.
April 19, 2012 - 10:28am
Google Maps vs. Mapbox
Google Maps works great for smaller sites, but they've recently begin to start charging sites with higher traffic levels. I'm going to take a look at Mapbox for my next build. Check out Designing Fast and Beautiful Maps from DrupalCon Denver for more details.
The goal of this post is to explain how to get Google Maps working within your website. So, first I should explain that there are several ways to display a Google map on your site. The first way is to create a link to a map and every time someone clicks on it, it takes them to the Google site. Second way is to create a "static" map. So, the map is physically on your site, but there is no interaction. You can pan, zoom, or get directions. Third way is to create a "dynamic" map. This will require you to get a Google maps API key. But, the best part is that it's free. Go to http://code.google.com/apis/maps. Once you have the key, all you need to do is code the map. There are lots of examples on the Google site. Here's what I did. And here's my attempt to explain the code.
<script src=" http ://maps.google.com/?file=api&v=2.x&key=<<replace this with your Google maps API key>>" type="text/javascript"></script>
This tells the browser that you want to use the Google maps script. This is also where you must enter your Google maps API key. Each key is assigned to a specific web address and can not be used interchangeablely. (I added a space between http and the colon to avoid having the url auto shrunk. No space should be there.)
<script type="text/javascript">var map;
var gdir;
var geocoder = null;
var addressMarker;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "load", onGDirectionsLoad);
setDirections("Elizabeth, NJ", "700 Bayway Avenue, Elizabeth, NJ 07202");
}
}
This function does most of the hard work. It first checks to see if the browser is capable of displaying Google maps. The important line is the setDirections line. Change the address within the quotes to set the location when the webpage is first displayed. So, in my example, I have it showing directions from the center of town to the church.
function setDirections(fromAddress, toAddress) {gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": "en" });
}
This is the function that parses all the information into an address that Google maps can use. Nothing to change here for me.
function onGDirectionsLoad(){
// Use this function to access information about the latest load()
// results.
// e.g.
// document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
// and yada yada yada...
}
</script>
This is an empty function that I haven't bothered with.
</head><body onload="initialize()" onunload="GUnload()">
This is the main body of the page. It intializes Google maps.
<form action="#" onsubmit="setDirections(this.from.value, this.to.value); return false"><div align="center">
From: <input type="text" size="35" id="fromAddress" name="from" value="Elizabeth, NJ"/> To: <input type="text" size="35" id="toAddress" name="to" value="700 Bayway Avenue, Elizabeth, NJ 07202"/> <input name="submit" type="submit" value="Get Directions!" />
</div>
</form>
This creates two text boxes and a button to accept input of the starting address and the ending address. The only thing that really needs changing is the size field and the value field.
<div id="map_canvas" style="width: 660px; height: 500px"></div><div id="directions" style="width: 660px"></div>
</body>
This is what actually calls for the maps and directions to be displayed. All you need is a div with an id of map_canvas for the map and a div with an id of directions for the directions. For the map you need to specify a width and height. It doesn't like height set to auto either. If not height is set, the height will be 0px. Not very useful. The directions seem to be the opposite. If you specify a height for the directions, it can screw up the page.
I hope this post was helpful. If you want to see the actual map that all this code created, visit http://www.basileaministries.org/directions.