Google Maps and Drupal
Submitted by kwang0274 on January 26, 2009 - 11:45am
The goal of this tutorial 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.o....
Wat abt the GMAP module guys
Wat abt the GMAP module guys ? would dat not suffice .. or does dis do something different? Also, I wanted to know if it was possible to have "Get Directions " functionality of the Google maps embedded within the website.
I still haven't really
I still haven't really understood the point of Google Maps.
