09 Apr2010

GoogleMaps in MODx by Brandon Z.

Summary
Googlemaps doesn't need an introduction, it's widely used all over the web. But the Googlemaps I will demonstrate today is not hard to implement and will help your sites a lot with the Contact / Route page!

Installation guide
The .zip will contain different folders. Each folder defines the type of code you have to copy and past in your MODx. Keep in mind to check for your ID´s!

Usage
Download the files. Go to your manager and add the following code to your HEAD tags in (a new?) Contact us Template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Inhumane Design | GoogleMaps in MODx</title>
<base href="http://inhumane-design.com/" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps </title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YOURKEYGOESHERE"></script>
    <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);
        GEvent.addListener(gdir, "error", handleErrors);
    
        setDirections("Ariensplein 3 Enschede", "Landmansweg 120 Hengelo", "en");
      }
    }
    
    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
    }
    
    function handleErrors(){
     if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
       alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
       alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
     
     else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
       alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
    
    //   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
    //     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);
       
     else if (gdir.getStatus().code == G_GEO_BAD_KEY)
       alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
    
     else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
       alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
      
     else alert("An unknown error occurred.");
    }
    
    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>


  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">



<h2 class="kop-right">Bereken uw Route<br /></h2>
    <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
      <table>
        <tr>
          <th align="right">From:&nbsp;</th>
          <td>
            <input type="text" size="25" id="fromAddress" name="from" value="Ariensplein 3 Enschede"/>
          <td>
            <th align="right">&nbsp;&nbsp;To:&nbsp;</th>
            <td align="right"><input type="text" size="25" id="toAddress" name="to" value="Landmansweg 120 Hengelo" />
          <td>
        </tr>
        <tr>
          <th>Language:&nbsp;</th>
          <td colspan="3">
            <select id="locale" name="locale">
              <option value="en" selected>English</option>
              <option value="fr">French</option>
              <option value="de">German</option>
              <option value="ja">Japanese</option>
              <option value="es">Spanish</option>
            </select>
            <input name="submit" type="submit" value="Get Directions!" />
          <td>
        </tr>
     </table>
    </form>
    <br/>
    <table class="directions">
      <tr>
        <th>Formatted Directions</th><th>Map</th>
      </tr>
      <tr>
        <td valign="top">
          <div id="directions" style="width: 275px"></div>
        <td>
        <td valign="top">
          <div id="map_canvas" style="width: 310px; height: 400px"></div>
        <td>
      </tr>
    </table>




  </body>
</html>

The custom Google Key
Right under the Title you´ll find a key=YOURKEYGOESHERE

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=YOURKEYGOESHERE"></script>

This should contain your custom Google key, in order to get one go to the following link and signup for a key.
Replace the YOURKEYGOESHERE text for the code and scroll down.

Editing the standard route description
To edit the routedescription search for the following code:

setDirections("Ariensplein 3 Enschede", "Landmansweg 120 Hengelo", "en");

You can easily edit this: Ariensplein 3 Enschede is the location you start off and Landmansweg 120 Hengelo is the place you want to go to. The "en" is the language Google uses. If you change it to "nl" it'll become dutch, "fr" will make it french and so on.

Make it so that the destination is allready filled in:
To edit this code:

<input type="text" size="25" id="fromAddress" name="from" value="Ariensplein 3 Enschede"/>

And edit the value to a working GoogleMaps search.

Doing these steps is 5 minutes work and in return you'll get something really nice. Ofcourse, if you want to make it better you'd add an print functionality but this works just as well, hardly any work!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Inhumane Design | GoogleMaps in MODx</title>
<base href="http://inhumane-design.com/" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps </title>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA8AXCTfYXpnGyAcfAcoloihQF6LpI21Xneb2--C1v3t5P9BK7yBTqOPmyuh2qVTP49TnLUS0CQI99tw"></script>
    <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);
        GEvent.addListener(gdir, "error", handleErrors);

        setDirections("Ariensplein 3 Enschede", "Landmansweg 120 Hengelo", "nl");
      }
    }

    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
    }

    function handleErrors(){
     if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
       alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
       alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);

     else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
       alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

    //   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong
    //     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);

     else if (gdir.getStatus().code == G_GEO_BAD_KEY)
       alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

     else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
       alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);

     else alert("An unknown error occurred.");
    }

    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>

</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">

<h2 class="kop-right">Bereken uw Route<br /></h2>
    <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
      <table>
        <tr>
          <th align="right">From: </th>
          <td>
            <input type="text" size="25" id="fromAddress" name="from" value="Ariensplein 3 Enschede"/>
          <td>
            <th align="right">  To: </th>
            <td align="right"><input type="text" size="25" id="toAddress" name="to" value="Landmansweg 120 Hengelo" />
          <td>
        </tr>
        <tr>
          <th>Language: </th>
          <td colspan="3">
            <select id="locale" name="locale">
              <option value="en" selected>English</option>
              <option value="fr">French</option>
              <option value="de">German</option>
              <option value="ja">Japanese</option>
              <option value="es">Spanish</option>
            </select>
            <input name="submit" type="submit" value="Get Directions!" />
          <td>
        </tr>
     </table>
    </form>
    <br/>
    <table class="directions">
      <tr>
        <th>Formatted Directions</th><th>Map</th>
      </tr>
      <tr>
        <td valign="top">
          <div id="directions" style="width: 275px"></div>
        <td>
        <td valign="top">
          <div id="map_canvas" style="width: 310px; height: 400px"></div>
        <td>
      </tr>
    </table>

</body>
</html>DS

(2) comments

brandon
Posts: 2

rtrgf
Reply #2 on : Thu October 28, 2010, 12:29:26

ofkgdfgdgdf
fdg
df
gdf

f

f

f

Murray
Posts: 2

Re:
Reply #1 on : Fri September 03, 2010, 02:59:41

just to let you know the demo is broken.

Write a comment

Required fields are marked with *.

Rate this post

3/5 stars (174 votes)

About us

Combining people from all over the world, Inhumane Design's vision is to broaden the world of computers and graphics.

10 RANDOM BLOGS