After a bit of searchin’, rummagin’, plunderin’, & hackin’, I think I’ve found the easiest possible way to add a Google Map & “Get directions” form exactly like this one - http://www.webcast1.com/googlemaps/datamax-contact-us.html - to your client’s website.

One caveat right off the top:

Be careful when copying and pasting from Word Press.  It might be better to “view source” of this post and copy from there.

Frank had some issues with mangled characters and weird stuff that took some time to hammer back into shape.   We also ran into CSS issues there - the default <p> and <a>  styles were light and so text did’nt show up clearly within the popup “marker” window.

Check webcast1.com/googlemaps to see several working examples.

If you follow the painstaking yet simple instructions laid out below, you can spend just an hour or two to create content which offers a lot of value to site visitors, and is therefore justifiable as a marketing tactic and value-add, even though it does not promote organic search rankings (as far as we know right now - that could change, especially in terms of the benefits to a site’s local search profile).

Find out how Google Maps API 2, some poorly understood javascript, and HTML ducttape can be used to create simple, pretty, scrollable, useful maps with - bonus! - a clickable “marker” with pop up “Get Directions” form integrated into the map …

Here are the steps you need to take, in brutally robotic form …

1) Open your existing Location page, or create a new, empty one from basic site template.

2) Go to http://geocoder.us, enter your client’s location into the form “See Geocoder in action!” form, center-right on the page.

3) Copy the numerical latitude and longitude - given as a pair of coordinates like “23.440020, -10.00442″ - into a text file and save or keep on hand.

4) Return to the source of the location page you’re editing … add the following code to the header section of the page:

4a) <base href=”http://www.yourclient.com”>

4b) <script src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAi5lsdikYDm6-Jz3Kopt3wRTX_zqz2ZLDzLi0d-4K0ER4bMFHJhTKtJnXNQrb48JvNQd0JWxrFCERpQ” type=”text/javascript”> </script>

4c) <script type=”text/javascript”>

    //<![CDATA[

    // Check to see if this browser can run the Google API

      var gmarkers = [];
      var htmls = [];
      var to_htmls = [];
      var from_htmls = [];
      var i=0;

      // 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
        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=48 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=48 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);
        });
        gmarkers[i] = marker;
        htmls[i] = html;
        i++;
        return marker;
      }

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

      // Display the map, with some controls and set the initial location
      function load() {
      if (GBrowserIsCompatible()) {

	  var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 26.408136,-80.104255), 13);

      // Set up markers with info windows 

      var point = new GLatLng( 26.408136,-80.104255);
      var marker = createMarker(point,'Datamaxsys','Datamaxsys Headquarters<br>951 Clint Moore Road Suite B<br>Boca Raton, FL 33487')
      map.addOverlay(marker);
	  }
}

    // 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/

    //]]>
</script>

5) Modify the <body> tag to include the javascript required to activate the above code, and make it run correctly:

<body onload=load(); onunload=GUnload();>

You can leave in any color or other info in the <body> tag, by the way.

6) Now to edit the code you just pasted in step 4 …

6a) Replace the numbers in the following lines with the numbers you got from geocoder.us ->

map.setCenter(new GLatLng( 26.408136,-80.104255), 13);

and
var point = new GLatLng( 26.408136,-80.104255);

6b) Carefully replace the Datamax-specific text in the following line with your client’s business name and address (and whatever other text you want to appear in the Info Window pop up) ->

var marker = createMarker(point,’Datamaxsys’,'Datamaxsys Headquarters<br>951 Clint Moore Road Suite B<br>Boca Raton, FL 33487′)

7) Add the following HTML in the spot you want your map to appear within the body of the page:

<div id=”map” style=”width: 500px; height: 300px”></div>

Save and upload to http://www.webcast1.com/googlemaps

9) Change links on your site to the location page so that they point to the file you just uploaded to webcast1.com/googlemaps.

All the internal links on your new location page - the menus, etc. - should still direct back to yourdomain.com.

Also, incidentally, the code above can easily support multiple locations on a map. Just copy and add new Geocode-generated points with more blocks of

	var point = new GLatLng( 26.408136,-80.104255);
	var marker = createMarker(point,'Datamaxsys','Datamaxsys Headquarters<br>951 Clint Moore Road Suite B<br>Boca Raton, FL 33487')
	map.addOverlay(marker);

There’s a hell of a lot more you can do with the Google Maps API and javascript to customize and trick out your map, and even create entirely new services for your client’s visitors. Try the official docs at http://www.google.com/apis/maps/documentation/