Web Design Forum

callumjones · 07-28-2007

For those interested in developing with Google Maps I thought I would share with you a very nifty framework/extension called GMapEz.

It is probably the most useful tool you could ever use for implementing Google Maps into your site. It contains all the scripts in one JS file so all you have to do is call some HTML and it will generate the map for you.

Code:

<html xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>My GMapEZ Maps</title>

    <meta name="gmapkey" content="abcdefg" />
    <script
      src="http://bluweb.com/chouser/gmapez/gmapez-2.js"
      type="text/javascript"></script>

  </head>
  <body>

    <div class="GMapEZ" style="width: 300px; height: 300px;">
    </div>

  </body>

</html>

There is no need to chuck this messing JS everywhere in your page for mapping a lot of people, all you have to do is make a hyperlink and it will build markers from that.

For example to create a marker:

Code:

<a href="http://maps.google.com/maps?ll=41.092104,-85.144740&amp;spn=0.006130,0.009795&amp;t=k&amp;hl=en"></a>

This makes it very easy when using PHP to print recursive markers for 1000+ students as I have done. You just need to couple it with a cURL function for geocoding and you have a very powerful mapping script.

To add controls such as zoom it is as simple as modify the main div!

Putting that into Server-Side language such as PHP.

Here is the script I use for building the map

PHP Code:


<html xmlns:v="urn:schemas-microsoft-com:vml">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Maps</title>
    <meta name="gmapkey" content="ABQIAAAA9BGXXVM68Vhwg8Lj4oKLtxSDSwKFTcPXitZF-tRvZ-CMUGEZShTOqGpwrQAw-sTTfRDQWkfA_xmnDw" />


<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
    <script
      src="gmapez-2.js"
      type="text/javascript"></script>

</head>

<body>
<div class="header" id="pageHeader">JTC Maps</div>

<div class="nav" id="navContent">
  <p class="navText"><a href="map.php">Current Students</a></p>
  <p class="navText"><a href="map.waiting.php">Waiting Students</a></p>
</div>
<div class="container" id="mainContent">
    <div class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl GOverviewMapControl" style="width: 950px; height: 500px;">
<?php
$sql = "SELECT * FROM `people`";
        $result=mysql_query($sql);

        $num=@mysql_numrows($result);

        $i=0;
        $male = 0;
        $female = 0;
            while ($i < $num) {

            $address1=mysql_result($result,$i,"Address01");
            $address2=mysql_result($result,$i,"Address02");
            $state=mysql_result($result,$i,"State");
            $status=mysql_result($result,$i,"Gender");
            $first_name=mysql_result($result,$i,"FirstName");
                
                $address_full = $address1 ." ". $address2 ." ". $state ." Australia";
            
            //Colour the markers
                    if ($status == "M") {
                        $colour = "BLUE";
                        $male++;
                    } elseif ($status == "F") {
                        $colour = "RED";
                        $female++;
                    }
            
                       //GeoCODE!
                       $data = google_geo($address_full);
                        
                        $data = explode(",",$data);
                        
                        $lat = $data[1];
                        $long = $data[0]; 

        //create the maker
            echo "<a href=\"http://maps.google.com/maps?f=q&hl=en&geocode=&ie=UTF8&ll=". $lat .",". $long ."&z=16&iwloc=addr&om=1\">". $colour ."</a>\n";

//now place a bubble (so people can click and expand info")
echo "<div>". $first_name ." ". $last_name ."<br>". $address1 ."<br>". $address2 ."<br></div>\n";
            $i++;
            }
    
    
    
    ?>

GMapEZ makes it very easy to build Google Maps without all the JS knowledge, I suggest those developing for Google Maps try it out!

Digg it!

rswan46 · 07-30-2007

Callum,

Loved your quick summary of the value of GMapEZ. I had used it for a year or so but then my member list began to grow too fast to be looking up latitudes/longitudes manually. Your method will come in valuable as soon as my vendor provides a MySQL version of the membership software.

One possible improvement: If you wrote back to your people table the lat/lon found by your geocoding method, then you could skip the geocoding section and increase performance when lat/lon is not null.

Whenver one of your members changes their address, simply make the previous lat/lon null.

Hope this makes sense.

Rick

callumjones · 07-30-2007

rswan46 originally posted:

One possible improvement: If you wrote back to your people table the lat/lon found by your geocoding method, then you could skip the geocoding section and increase performance when lat/lon is not null.

My geocode function is a modification of Rasmus' Yahoo GeoCoder that caches it to /tmp. I will try and post it later.

Cheers, I am glad my open source could help.

callumjones · 08-05-2007

Here is the GeoCoding function originally done by Rasmus Lerdorf with some modification done to work with Google Maps API.

PHP Code:

 function request_cache($url, $dest_file, $timeout=43200) {
  if(!file_exists($dest_file) || filemtime($dest_file) < (time()-$timeout)) {
    $stream = fopen($url,'r');
    $tmpf = tempnam('/geo_temp','YWS');
    file_put_contents($tmpf, $stream);
    fclose($stream);
    rename($tmpf, $dest_file);
  }
}

function google_geo($location) {
    $key = "GOOGLEAPIKEY";
  $q = 'http://maps.google.com/maps/geo';
  $q .= '?q='.rawurlencode($location) .'&output=xml&key='. $key;
  $tmp = '/geo_temp/google_geo_'.md5($q);
  request_cache($q, $tmp, 93200);
  libxml_use_internal_errors(true);
  $xml = simplexml_load_file($tmp); 
    $ret = $xml->Response->Placemark->Point->coordinates ;
  return $ret;
}

cpf · 08-05-2007

<subtle bump above?>

:p

So its just a 'wrapper' for google maps?

callumjones · 08-06-2007

cpf originally posted:

<subtle bump above?>

:p

So its just a 'wrapper' for google maps?

Yeah well, I had to get the attention somehow.

Yes it is, a great JS framework.

Web Design Forum

Web Design and Web Development Forum

LATEST POSTS

FORUM STATISTICS

PARTNER SITES

LinkBack

Thread Tools

Rate This Thread

Display

The power of GMapEz for Google Maps

Re: The power of GMapEz for Google Maps

Re: The power of GMapEz for Google Maps

Re: The power of GMapEz for Google Maps

Re: The power of GMapEz for Google Maps

Re: The power of GMapEz for Google Maps

Similar Threads

How to make Invision Power Board Skins

Microsoft using Power Macs to power Xbox 360 demos?

Power Machine - Post your report