M and L Adventures » Tutorials http://www.mandladventures.com Leading you on the technical adventure Thu, 28 Jul 2011 21:45:14 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How to Flash Your WRT54GL Firmware from DD-WRT to Tomato http://www.mandladventures.com/2008/12/03/how-to-change-your-wrt54gl-firmware-from-dd-wrt-to-tomato/ http://www.mandladventures.com/2008/12/03/how-to-change-your-wrt54gl-firmware-from-dd-wrt-to-tomato/#comments Thu, 04 Dec 2008 04:03:02 +0000 Matt http://www.mandladventures.com/?p=346 Related Posts:]]> **DISCLAIMER**The following instructions are provided without warranty of any kind. Flashing firmware does not come without risk. I will not be held responsible for any resulting equipment failure or otherwise undesirable results. Proceed at your own risk.

This tutorial explains how I successfully re-flashed my Linksys WRT54GL version 1.1 to use the Tomato 1.22 firmware rather than DD-WRT version 23 SP2 VPN firmware (generic) I have been using for the past couple of years. I decided to write this tutorial because lots of sites have instructions on flashing from the default Linksys firmware to Tomato but far fewer sites offer lots of detail on how to flash from other firmware such as DD-WRT.

I have provided directions with enough detail for the non-technical user to feel comfortable with the procedure. To make things faster for the technical users, I have highlighted the major steps. At the bottom of the post, I’ve included links to related articles I’ve published if you’d like to learn more.

As a bit of background information, I’m used a fully patched (as of November, 2008) Windows Vista Ultimate 64-bit with Service Pack 1 (SP1) Operating System and up-to-date Firefox 3 during the firmware upgrade process. The OS and web browser shouldn’t matter that much, but I thought I share in case you were worried about such things.

Before you begin, download the latest version of the Tomato firmware that is suited for most routers. This tutorial walks through flashing to version 1.22. The files are zipped in the great, but uncommon, 7zip format so you’ll need 7zip or another program that supports the 7zip format to unzip the files. The zip package contains several files, you will only need the “WRT54G_WRT54GL.bin” file but it is a good idea to checkout the “readme.”

I recommend verifying the MD5SUM hash of the “WRT54G_WRT54GL.bin” file to ensure the download wasn’t corrupt or hasn’t been comprised. If you don’t already have a tool to calculate MD5SUMs, I recommend using HashCalc although you must manually compare the sums with this tool unlike some other tools. Unfortunately, Polarcloud does not provide the MD5SUM of the download on their site but luckily for you, I calculated the hash of my download. The signature of the file should be 866251021d42608c69bff558115f95f8.

I recommend printing (or at least saving, not bookmarking, to your hard drive) the following web pages for reference since you will not have Internet access during this process:

It is best to turn off your firewall and anti-virus during this process to ensure that nothing interrupts the firmware flash. An interruption could cause the flash to fail and brick your router. If something does go wrong you may be able to recover from a bad flash.

You should ONLY perform the flash through an Ethernet cable using standard http (not https). Do not do this wirelessly (its best to temporarily disable the wireless adapter on your computer). If your super paranoid or live in an area with unreliable electricity, you should plug your router an PC into an uninterruptible power supply because a power failure during a firmware flash could brick your router. Plug the blue Ethernet (Cat5/RJ45) cable that came with your router into the Network Interface Card (NIC) on the back of your computer and into one of the ports labeled 1, 2, 3, or 4. The “Internet” port on your router should be connected to your broadband source (e.g., cable or DSL modem). Please ignore the extra cable in the picture. It is not needed for the flash to work.

Linksys WRT54GL Cable Connections

I recommend reviewing all of your DD-WRT settings so you can quickly configure the Tomato firmware to offer similar functionality. I took screenshots of all of the pages where I had non-default settings. I also used the same security settings, including WPA2 password, after I loaded Tomato so that all of my wireless devices would not have to be updated. However, if you have poor wireless security, after flashing to Tomato is the perfect time to implement stronger security. You can reference my Securing Your Wireless Network article if you want to learn how to have a really secure wireless network.

In addition to the screenshots of your settings, it is also a good idea to perform a backup of your DD-WRT configuration. Please note you can only restore this backup on the same model router and firmware with which the backup was made. To perform a backup, go to the “Administration” tab and then the “Backup” sub-tab. Once there, just click the “Backup” button and save the file.

Backup

The last item that needs to be completed before uploading the new firmware is to reset your DD-WRT firmware to the default settings. A few ways to do this exist. I chose to use the standard web interface because it is easy and should always work. Nonetheless, pressing and holding the reset button on the back of your router for 30 seconds should also work (assuming you have not disabled that feature in your custom firmware).

To reset the router to firmware defaults, go to the internal IP address of your router (most likely 192.168.1.1) and login with the user name and password you setup when you first installed the router (if you have trouble with the login use the reset button method). Once logged in, go to “Administration” tab and the “Factory Defaults” sub-tab. I forgot to write down the exact buttons and also forgot to take a screenshot of this step but I think you just select the “Yes” radio button next to “Restore Factory Defaults” then select “Save Settings.” If that’s not it exactly, you shouldn’t have any trouble determining what to select. Be patient and don’t touch anything because the reset could take a couple of minutes.

The Tomato FAQ recommends that you Telnet into your router before performing the flash and type the “nvram get http_passwd” command to obtain the password that will be used by Tomato after the flash. You cannot just use the DD-WRT password because of a change in the way DD-WRT uses the standard http_passwd variable. I must admit that I did this step but the password I obtained during the Telnet session did not allow me to login. However, as I was writing this tutorial, it occurred to me that I may have obtained the password via Telnet before I reset DD-WRT to the default settings which may explain why the password I obtained did not work.

In order to Telnet into your DD-WRT router, open up the run box by hitting the “Window” key and “R”. Next type “cmd” and hit “Ok.” In the command window, type “telnet 192.168.1.1″ where 192.168.1.1 represents the IP address of your router. You will be prompted for a user name and password. The telnet user name is always root even if you login to the web interface with a different user name. The password should be the default DD-WRT password of “admin” since you just performed a reset. If not, try your old web login password.

Just so you know, Telnet is not enabled in Windows Vista by default but is in XP. To enable Telnet in Vista follow the instructions at Tech-Recipes site. Alternatively, you could use a tool like Putty.

telnet session

The screenshot above shows the password command being typed into a Telnet session; it does not show the output of the command (i.e., my password).

Write down the password provided because you will need it later.

The next few steps is where the magic starts to happen. Go back to the DD-WRT web interface. You may have to renew the DHCP lease and login again. Since you have reset the firmware to default settings, the user name and password is now “root” and “admin”, respectively. Once logged in, navigate to the “Administration” tab and the “Firmware Upgrade” sub-tab.

Next, select the “Browse” button and select the “WRT54G_WRT54GL.bin” file you downloaded early. Once located, select the “Open” button and then the “Upgrade” button. Wait patiently for the upload to complete. Whatever you do, DO NOT interrupt it.

Firmware Upgrade

After a couple of minutes, you should see a screen that says “Upgrade successful. Unit is rebooting now. Please wait a moment…”

Upgrade successful

Once the reboot completes, you will be prompted to login to the Tomato firmware. This is where you use the “root” user name and the password you obtained via Telnet. Don’t worry if you can’t login…the same thing happened to me. The next paragraph has a solution for you.

Login Box

Since the Tomato interface did not accept the password I obtained through the Telnet session before the flash, I had to perform a hard reset. To do this you need to hold the reset button on the back of the router while unplugging the router. Continue to hold the reset button as you re-plug in the router. Once the router is plugged in you should continue holding the reset button for 30 seconds to complete the hard reset.

After the hard reset is complete, go back to Firefox and navigate to http://192.168.1.1. At the prompt enter in “root” for the user name and “admin” as the password. The Tomato web interface should come up.

Once you’ve logged in, you should see the new Tomato firmware. Since you are upgrading from DD-WRT, the Tomato FAQ recommends performing a full reset by navigating to the “Administration” section and then the “Configuration” sub-section. From there, select “Erase all data in NVRAM memory (thorough)” from under the “Restore Default Configuration” menu and then hit “OK.” If you had to do a hard reset in order to get your login to work, you’re probably could skip this step but it won’t hurt to do an additional reset just to be safe.

Restore Default Configuration

After restoring the default configuration, you need to log back in using with the user name of “root” and password of “admin”. Once logged in, hit the “Renew” button that is on the “Overview” page.

After renewing you may need to reboot your computer to get Internet access. Alternatively, in Vista you may type “Network and Sharing Center” in the Start Search box. Within the Network and Sharing Center select the red “X” between the network on Internet on the map. The Windows Network Diagnostics menu should appear. On that menu select “Reset the network adapter…” option at the bottom. Windows will repair the network and you should see a message that says “the problem has been resolved.”

Network and Sharing Center

Now that everything is working, don’t forget to turn your anti-virus and firewall back on. Also, be sure to check out my Securing Your Wireless Network article if you want to learn how to have a really secure wireless network.


Congratulations, you’ve successfully flashed your router! Since you’ve successfully flashed your WRT54G, you may be interested in Wireless Hacks: Tips & Tools for Building, Extending, and Securing Your Network.

If you liked this post, consider subscribing to my feed and/or sending me something from my wish list.

Related post

Related Posts:

]]> http://www.mandladventures.com/2008/12/03/how-to-change-your-wrt54gl-firmware-from-dd-wrt-to-tomato/feed/ 17 Ubuntu HDMI Sound Configuration http://www.mandladventures.com/2008/11/03/ubuntu-810-hdmi-sound-configuration/ http://www.mandladventures.com/2008/11/03/ubuntu-810-hdmi-sound-configuration/#comments Mon, 03 Nov 2008 11:05:01 +0000 Matt http://www.mandladventures.com/?p=317 Very recently, I built my very first PC from the ground up. It was fun but somewhat challenging experience. On my new PC, I’ve been running Ubuntu 8.10 intrepid ibex. I’ve really enjoyed using Ibex but getting everything to work the way I want has been a bit of a challenge.

One such challenge was getting my HD-TV to play sound while connected via a HDMI cable to my HIS HD 4850 IceQ4 Turbo. After a fair amount of searching and configuration changes, I got it to work.

Since the solution I found was spread across a couple of different forum posting that were not directly related to my problem, I thought I’d write a short tutorial for others who may run into the same situation as I did.

Install ATI HD 4850 Catalyst Drivers
Before I begin explaining the sound settings, I should also explain the process I used to install the ATI Catalyst drivers. I can’t remember all the pages I referenced to learn how to install the drivers, so I won’t be able to give credit to the websites that helped my like I’d like to.

To install the ATI HD 4850 Catalyst drivers, you need to go to System > Administration > Synaptic Package Monitor and install the envyng-core package. EnvyNG is an application written in Python which will download the latest ATI or NVIDIA driver or the Legacy driver (for older cards) (according to the model of your card) from ATI or Nvidia’s website and set it up for you handling dependencies (compilers, OpenGL, etc.) which are required in order to build and use the driver. If you don’t find the envyng-core package when you search, check to make sure that “Proprietary drivers for devices (restricted) is checked on the software sources menu.

Synaptic Package Manager - EnvyNG

Once this package is installed, you should restart you computer. Once you’ve restarted, the Hardware Drivers application located under System > Administration should find the ATI/AMD proprietary FGLRX graphics driver. This driver should be installed and activated. The driver is required to fully utilize the 3D potential of some ATI graphics cards, as well as provide 2D acceleration of newer cards. Once installed, it’s probably a good idea to restart you PC once more.

ATI/AMD proprietary FGLRX graphics driver

With the ATI Catalyst driver installed, you should be able to fully enjoy the Compiz-Fusion effects in Ubuntu 8.10. The driver version I’m using is 8.54.3 with Catalyst Control Center Version 2.1.

Update System Sound Settings
For your system to play sounds through your graphics card’s HDMI port, you need to tell Ubuntu to use the graphics card sound system VS your motherboard’s. This is the intuitive change. Go to System > Preferences > Sound. On the Devices tab, change all of the options excluding sound capture (e.g., Sound Events, Music and Movies, Audio Conferencing, and Default Mixer Tracks) to HDA ATI HDMI ATI HDMI (ALSA).

Ubuntu Sound Preferences - HDA ATI HDMI ATI HDMI (ALSA)

The next sound change is less intuitive; it requires you to double click on the speaker icon in your top panel to bring up the Volume Control menu. On this menu, change the Device drop down list option to “HDA ATI HDMI (Alsa mixer) and then select the Preferences button near the bottom right. On the preferences menu, check the IEC958 Switches track to be visible and then close the preferences screen. Back on the Volume Control screen, you should now have an IEC958 option on a Switches tab. Check this option and close the Volume Control menu.

HDA ATI HDMI (Alsa mixer) - IEC958

The sound tests available on the System > Preferences > Sound should now play sounds. If it works, you’ll be hearing the tests sounds on your TV using only the HDMI out cable on the HD 4850.

I owe a big thank you to the MediaBox Blog posting titled “HOWTO: Audio over HDMI with the HD3200 \ RS780 in Ubuntu” for these sound setting tips.

VLC Sound Settings
I prefer the VLC media player over Ibex’s default Totem movie player. However, in this particular case, Totem played the sounds through my video card without requiring any additional changes while VLC did not.

Finding the appropriate audio settings in VLC proved a bit more challenging than I expected. To save you the time, I’ll outline exactly what you need to change. Open up VLC preferences by selection preferences from the tools menu. Near the bottom left of the preferences screen, be sure to select all as the show settings option.

Expand the Audio menu and then the Output modules option. On the Output Modules option, select ALSA audio output form the drop down menu.

VLC Output Module ALSA

Then go to the ALSA option under the expanded Output modules section. Here you need to refresh the ALSA Device Name list. Once the list has refreshed, select HDA ATI HDMI: ATI HDMI (hw:1,3) and save all your settings.

VLC ALSA Preferences

VLC should now also play sounds through an HDMI cable.

For this VLC tip, I owe a big thank you to tie_dyed_sox on the Ubuntu forums.


No related posts.

]]> http://www.mandladventures.com/2008/11/03/ubuntu-810-hdmi-sound-configuration/feed/ 23 Google Calendar on your Site http://www.mandladventures.com/2007/05/07/google-calendar-on-your-site/ http://www.mandladventures.com/2007/05/07/google-calendar-on-your-site/#comments Mon, 07 May 2007 12:30:37 +0000 Matt http://www.mandladventures.com/?p=220 Related Posts:]]> Would you like the ablity to post your an easy to maintain Calendar on your own website? Google’s Calendar makes it easier than ever. In the past, creating Calendars on web pages was a pain. I’ve tried a few solutions and looked at a few more. The easy ones weren’t very good and the complex ones were a pain to work with. At least that was my experience.

If you like how the Calendar below looks and don’t mind managing the Calendar through Google, then the tutorial below is for you.


Before we can get started you will to sign up for a Google account if you don’t already have one. Once you have an account or if you already had one, you need to sign in or goto your Calendar.

Once you’ve signed into your Calendar, you must decide if you want to share your main calendar or create a second just for your website. I recommend creating a second one so you can keep personal events separate from events you want others to see. To create a second calendar, expand (if it isn’t already) the calendar list by clicking the arrow beside Calendar.

Select Calendar

Once expanded, click the plus sign next to My Calendars (My shared Calendar has already been created, so that’s why you see “Your Shared Calendar” in the list of Calendars in the below screen shot).

Expanded View

You will need to fill in the details of your shared calendar. The main setting we’re concerned with here is to make sure “Share with Everyone” is set to “Share all information on this calendar with everyone”.

Create Shared Calendar

When prompted with “Are you sure you want to share this calendar with everyone?
Public calendars appear in Google Calendar searches.” select “Yes.”

Public Viewable Warning

Once you’ve hit the “Create Calendar” button, your shared calendar’s title should appear in the Calendars sidebar. The next step is to click on the little down arrow next to title of the calendar you want to share and select “Calendar Settings.”

Calendar Settings

This will take you back to the Calendar details page. On this page click on the “HTML” button in the Calendar Address section. When the dialog box appears, select the “Configuration Tool” Link.

Share HTML via Configuration Tool

The configuration of the Calendar is really up to you, but one thing to watch out for is the Calendar width. Make sure it will fit in the section of your site you would like to embed it in. 480 pixels wide is just right for my site. I happened to know my site’s content section is around 500 pixels wide. Several ways exist to find the width of the area you’d like to put the calendar in. Firefox has a cool plug-in called MeasureIt. You can also check your CSS file for the content div. Or you could just do trial an error. Your choice.

Shared Calendar Viewing Options

Once you’ve got all of the settings the way you like them, hit the “Update URL” button. All that’s left is copy and pasting the generated code into your website where you’d like the Calendar to appear. Easy as that!

Copy HTML Code

I don’t imagine you’ll have any problems because I’ve attempted to make this tutorial very beginners friendly, but if you do feel free to ask questions in the comments below. You can also check out Google’s brief explanation of how to do what I explained above.

What I’ve explained is a fairly basic way to add a Google Calendar to your own site. This works great for many people who want to manage their Calendar via Google’s interface and simply display the events on a website. However, the method described above doesn’t allow you or any of your site visitors to manage the Calendar or interact with it in any way.

If you would like the ability to interact with the Calendar on your site in a way that is similar to actually logging into your Google Calendar, then you need to use the Google Calendar Data API. This requires quite a bit of programming knowledge and is beyond the scope of this tutorial. I recommend reading Google’s API documentation for help with this.

Related post

Related Posts:

]]> http://www.mandladventures.com/2007/05/07/google-calendar-on-your-site/feed/ 5 How to Flash the WRT54GL with DD-WRT Firmware http://www.mandladventures.com/2007/04/12/how-to-flash-the-wrt54gl-with-dd-wrt-firmware/ http://www.mandladventures.com/2007/04/12/how-to-flash-the-wrt54gl-with-dd-wrt-firmware/#comments Thu, 12 Apr 2007 23:38:36 +0000 Matt http://www.mandladventures.com/?p=191 Related Posts:]]> **DISCLAIMER** The following instructions are provided without warranty of any kind. Flashing firmware does not come without risk. I will not be held responsible for any resulting equipment failure or otherwise undesirable results. Proceed at your own risk.

This tutorial explains how I successfully flashed my Linksys WRT54GL version 1.1 with the open source DD-WRT version 23 SP2 VPN firmware (generic).

Before proceeding, verify your WRT54GL is version 1.1. Per Wikipedia entry and DD-WRT Wiki), you can tell which version you have by checking the serial number. The serial number should be located on a sticker underneath the router. The serial number prefix CL7B corresponds to version 1.1 and CL7A corresponds to version 1.0.

Don’t despair if your router is version 1.0. You can still flash to the DD-WRT firmware. However, the process will be different due to a flash file size limit on the version 1.0 WRT54GL firmware. The main difference is that you will need to flash to a smaller version of the DD-WRT firmware (the mini version) first and then re-flash to the standard, VOIP, or VPN versions.

As a bit of background information, used a fully patched (as of April 6, 2007) Windows XP Pro with Service Pack 2 (SP2) and Internet Explorer 6 during the firmware upgrade process. The OS and web browser shouldn’t matter, but I have heard reports of Firefox causing some problems with the Flash for some people in the past though others have claimed to use Firefox without any problems.

Before you begin, download the package and version of the DD-WRT firmware best suited to your needs. This tutorial walks through flashing to the open source DD-WRT version 23 SP2 VPN firmware. Once you’ve downloaded the file, go ahead an unzip the files. The zip package contains several files, you will only need the “DD-WRT.v23_vpn_generic” file. We’re going to be using the generic file rather than the wrt54g file because we’re going to be using the web GUI to upload the file.

I recommend verifying the MD5SUM hash of the “DD-WRT.v23_vpn_generic” file to ensure the download wasn’t corrupt or hasn’t been comprised. If you don’t already have a tool to calculate MD5SUMs, I currently use HashCalc. I like it because it can calculate many different hash types, not just MD5s. The signature of the file should be baf91850d3204fd64b120467425b4a11. If you plan on flashing a different version, you can find of list of signatures on the DD-WRT hashes page.

Since you will not have Internet access during this process, I recommend copying the information from the following pages into a document:

It is best to turn off your firewall and anti-virus software during this process to ensure that nothing interrupts the firmware flash. An interruption could cause the flash to fail and brick your router. If something does go wrong you may be able to recover from a bad flash.

I almost forgot to mention that you should ONLY perform the flash through an Ethernet cable using standard http (not https). Do not do this wirelessly (for the extremely caution, temporarily disable the wireless adapter on your computer to ensure your connecting through a wired connection). Plug the blue Ethernet (Cat5/RJ45) cable that came with your router into the Network Interface Card (NIC) on the back of your computer and into one of the ports labeled 1, 2, 3, or 4. The “Internet” port on your router should be connected to your broadband source (e.g., cable or DSL modem). Please ignore the extra cable in the picture. It is not needed for the flash to work.

Linksys WRT54GL Cable Connections

The last item that needs to be completed before uploading the new firmware is to reset your Linksys router to the factory defaults. More than one way to do this exists:

  • Selecting reset button within the web interface
  • Holding the reset button on the back of the router for 30 seconds

To reset the router to firmware defaults, go to the internal IP address of your router (most likely 192.168.1.1) and login with the user name and password you setup when you first installed the router (if you don’t remember, use the reset button method). Once logged in, go to “Administration” tab and the “Factory Defaults” sub-tab. Select the “Yes” radio button next to “Restore Factory Defaults” then select “Save Settings”.

Linksys Restore

If the reset was successful, you will see a page that says “Settings are successful. You will be returned to the previous page after several seconds.”

Linksys Reset Confirmation

Now that everything is setup we can begin the process of actually performing the flash. To upload the firmware, navigate to the “Firmware Upgrade” sub-tab under the “Administration” tab. On this page, select “Browse” to go to the place where you saved the “DD-WRT.v23_vpn_generic” file. Once located, select open and then the “Upgrade” button. Please wait patiently for the upload to complete. Whatever you do, DO NOT interrupt it. Walk away for a few minutes if your one of those people who tend to get impatient and cannot resist clicking buttons when things do not seem to be working as quickly as you think they should.

If all goes as well as expected, you will greeted by a screen that says “Upgrade is successful”. Next, click the “continue” button. If not successful, simply re-try the same steps or research the DD-WRT wiki for more info.

Firmware Upload

Next, you should see is a prompt to login to the new DD-WRT interface. The default user name is “root” and the default password is “admin”. Be warned, I wasn’t able to log-in initially even though I got this prompt. I’ll explain how I got resolved this momentarily.

DD-WRT log-in

To confirm that your router is working you should ping it. To ping your router, go to “Start > Run” in windows. Then type in “cmd” and hit “ok”. At the command prompt type in “ping 192.168.1.1″. If the router is online, you will get a ping response that says Packets Sent = 4, Received = 4, Lost = 0 (0% lost).”

Ping

Since the DD-WRT web interface didn’t come up right after the flash, I reset the new DD-WRT firmware back to firmware defaults. To do this you need to hold the reset button on the back of the router while unplugging the router. Continue to hold the reset button as you re-plug in the router. Once the router is plugged in you should continue holding the reset button for 30 seconds to complete the hard reset. This procedure is tricky so you may have to try a couple of times to get it exactly right (I did).

Once reset, go back to Internet Explorer (or your preferred browser) and navigate to 192.168.1.1. At the prompt enter in “root” for the user name and “admin” as the password. The DD-WRT web interface should come up this time.

DD-WRT Interface

Congratulations, you’ve successfully flashed your router! Since you’ve successfully flashed your WRT54G, you may be interested in Wireless Hacks: Tips & Tools for Building, Extending, and Securing Your Network.

Now that your running DD-WRT firmware, make sure to make use of all the available security features. See my post on Securing Your Wireless Connection and other post in the DD-WRT category.

If you liked this post, consider subscribing to my feed and/or sending me something from my wish list.

Related post

Related Posts:

]]> http://www.mandladventures.com/2007/04/12/how-to-flash-the-wrt54gl-with-dd-wrt-firmware/feed/ 201 Google Maps API Tutorial http://www.mandladventures.com/2006/05/04/google-maps-api/ http://www.mandladventures.com/2006/05/04/google-maps-api/#comments Thu, 04 May 2006 14:35:58 +0000 Matt http://www.mandladventures.com/?p=41 Related Posts:]]> Before you go through all the complexities of this tutorial, I recommend that you check out a recent Google Maps development I’ve posted about. I think you’ll find it quite helpful!

In response to a post on the Godbit forum, I created this brief Google Maps API tutorial. I believe every Church website, and every business for that matter, should provide a map and directions. The Google API lets us take that concept to a new level.
After completion of this tutorial you should be able to:

  • Have your own interactive map (I guess that’s a given since that is what this tutorial is about)
    • Set the default zoom level
  • Locate your geo coordinates
  • Center your map on those coordinates
  • Place a marker on those coordinates
  • Have a custom pop-up with a form to get To Here and From Here Directions
  • Know where to go to learn more

Want to see an example before we start?
You can also see this on a site I created at Vance Auto Sales.

Special Note: Google upgraded their API on April 3, 2006. I modified this code before writing this tutorial to use the new API, so all the new version 2 features should be available if you want to add some in. Also, Google does not provide any kind of routing features in the API. So when a user types in the address to get directions, a real Google Map opens in a new window with directions to or from our location.

Step 1-Sign up for a API Key
Before you can place a map on your own site you need to sign up for a Google API Key.

To sign up, you’ll need to provide the URL of the site that will be using the key. The easiest thing to do is provide the top-level directory that will use the key (rather than the absolute address of the page that will be using the map). Doing this ensures that you’re map will work on any page of your site. For example: I provided http://www.mandladventures.com/
Leave the page with the key in it open, so you can copy and paste the key in later steps. Remember, if you’re testing this on a localhost server, and then uploading it to a production server you’ll need two separate API keys.

Step 2-Locate Your Geo Coordinates
Google doesn’t provide a geocoding service at this time, so you’ll find that on your own.
Geocoder.us is what I used.
Simply enter the address you want to find the coordinates for, and write down the latitude and longitude geocoder.us provides.
Geocoder.us is only for United States addresses. If you live somewhere else, search for free geocoders.

Step 3-Create an XML file
This XML file will store all the points you want to mark on the map. This file also provides the text that will appear when the marker is selected. In our example, we only create one marker. If you want more than one marker on the map, add more instances of the of marker in the XML code below.

<markers>
  <marker lat="35.827818" lng="-86.072576" html="&lt;b&#47;&gt;First Baptist Church&lt;&#47;b&#47;&gt; &lt;br &#47;&gt; 405 West Main Street, &lt;br &#47;&gt; Woodbury, TN 37190" label="FBC"/>
</markers>

Change lat=”35.827818″ to your address’s latitude.
Change lng=”-86.072576″ to your address’s longitude.

Replace “First Baptist Church” with the title of your location.
Change 405 West Main Street, &lt;br /&gt; Woodbury, TN 37190 to your address.
Change the label=”FBC” to whatever you want.
Save the file as map.xml, and upload it to the same directory where your map page will be. You can change the directory, but you will have to change all the references to map.xml in step 7′s code to point to a your directory.

Remember: XML requires all HTML characters to be escaped.
For your convenience, I included a list of commonly escapeed characters below:

< = &lt;
> = &gt;
/ = &#47;
] = &#93;
[ = &#91;
" = &#34;
' = &#39;

Step 4-Call the API with your key
Insert the following code in the head section of your web page, placing your API key between key= and ”

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbTgUqmDVtw6KNosttYwutxR-kQiDMsqewHdPfI0JvuxAHQRqVhQsEF-filcfK_gQIlIUCIcFhtJH0Q" type="text/javascript"></script>

Step 5-Add an onunload event to the body tag

<body onunload="GUnload()">

Step 6-Place the div to contain the map

     <div id="map" style="width: 550px; height: 450px; border: 1px solid #000000;"></div>

	 <!--What to display if JavaScript is disabled in the user's browser-->
    <noscript><strong>JavaScript must be enabled in order for you to use Google Maps.</strong><br />
      However, it seems JavaScript is either disabled or not supported by your browser. <br />
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.<br /><br />
    </noscript>

Insert this div, where you want to the map to appear.
Change the sytle to fit your needs.

Step 7-Insert the final bit of code
Insert this right before the /body and /html tags at the end of your web page that contains the map.

<script type="text/javascript">
    //<![CDATA[

	//the original code had a GMapSidebar to pick the markers from, I eliminated the GMapSidebar,
	//but deleting the code that referenced the bar corrupted the rest of the code
	//so just ignore references to GMapSidebar, unless you're really with JavaScript
    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventually be placed in the GMapSidebar
      var GMapSidebar_html = "";

      // arrays to hold copies of the markers and html used by the GMapSidebar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      // arrays to hold variants of the info window html with get direction forms open
      var to_htmls = [];
      var from_htmls = [];

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);

        // The info window version with the "to here" form open (The Directions Form part.)
        to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" size=40 maxlength=40 name="saddr" id="saddr" value="" /><br>' +
           '<input value="Get Directions" TYPE="submit">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" +
           '"/>';
        // The info window version with the "to here" form open
        from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" size=40 maxlength=40 name="daddr" id="daddr" value="" /><br>' +
           '<input value="Get Directions" type="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" +
           '"/>';
        // The inactive version of the direction info
        html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the GMapSidebar
        gmarkers[i] = marker;
        htmls[i] = html;
        // add a line to the GMapSidebar html
        GMapSidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

      // functions that open the directions forms
      function tohere(i) {
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }

//*******************************************************************
//Edit these options to CONFIGURE THE MAP
      // create the map
      var map = new GMap2(document.getElementById("map"));
	  //GLargeMapControl adds large zoom and pan controls on the left,
	  //you can change it by picking from two of the options described below
	  //there is a GSmallMapControl for a smaller pan/zoom control
	  //also there is GSmallZoomControl - a small zoom control (no panning controls)
      map.addControl(new GLargeMapControl());

	  //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
      map.addControl(new GMapTypeControl());

	  //this adds a scale to the bottom left of the map, delete line if you don't want it
	  map.addControl(new GScaleControl());

	  //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
	  //these Coordinates set the center of the map, they do not place the marker.
	  //that is done in the map.xml file. If you want a marker to be centered, type
	  //the same coordinates here that are used for that marker in the map.xml file
	  //0 is zoomed all the way out.
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);
//*******************************************************************

      // Read the data from map.xml
      var request = GXmlHttp.create();
      request.open("GET", "map.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");

          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled GMapSidebar_html contents into the GMapSidebar div
          document.getElementById("GMapSidebar").innerHTML = GMapSidebar_html;
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://www.econym.demon.co.uk/googlemaps/
	//slight modifications by Matt from http://www.mandladventures.com/

    //]]>
    </script>

Step 8-Configure the map
Edit this section of the code above.

//*******************************************************************
//Edit these options to CONFIGURE THE MAP
      // create the map
      var map = new GMap2(document.getElementById("map"));
	  //GLargeMapControl adds large zoom and pan controls on the left,
	  //you can change it by picking to of the options described below
	  //there is a GSmallMapControl for a smaller pan/zoom control
	  //also there is GSmallZoomControl - a small zoom control (no panning controls)
      map.addControl(new GLargeMapControl());

	  //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
      map.addControl(new GMapTypeControl());

	  //this adds a scale to the bottom left of the map, delete line if you don't want it
	  map.addControl(new GScaleControl());

	  //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
	  //these Coordinates set the center of the map, they do not place the marker.
	  //that is done in the map.xml file. If you want a marker to be centered, type
	  //the same coordinates here that are used for that marker in the map.xml file
	  //0 is zoomed all the way out.
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);
//*******************************************************************

Set the default map center point, and the zoom level.
Change 35.827818 to your latitude
Change -86.072576 to your longitude.
Change 12 to your desired zoom level. 0 is zoomed all the way out.
To delete a control, remove the line of code.
You can change the types of controls used on the map.
For example, some controls can be smaller or bigger, which is useful if you have a small map. I included the alternative control names in the source code comments. For example change GLargeMapControl to GSmallMapControl.

Step 9-Tutorial Complete
Enjoy!


Download the Source Code used in this tutorial.

To learn more check out these resources:

Big Thanks goes to: