new

Supported arguments are

autozoom

If no center and/or zoom is specified this parameter can be used to calculate suitable values by a process of averaging the markers. If this parameter is an integer between 0 and 21 then that number is taken as a maximum zoom level and the builtin algorithm, "calculate_zoom_and_center", is used with that maximum zoom level. If the parameter is a CODE ref, then that function is used instead. The CODE ref must take an ARRAY ref of marker specifications as an input, and must return a pair consisting of the zoom level as an integer followed by a latitude-longitude string representing the center. Finally if the argument is blessed and has a "calculate_zoom_and_center" method, that will be used. For AUTO calculation of the center or zoom all the markers must be in the form "decimal,decimal". The "json" method will delete this as it has no meaning once the zoom level and center have been determined.

center

This must be a location that would be recognized by the Google maps API. If absent, and if no autozoom has been set, the Google maps API and client side javascript code must between them work out a center.

zoom

This represents the zoom level (<http://code.google.com/apis/maps/documentation/staticmaps/#Zoomlevels>), which is a number between 0 and 21 inclusive. If absent (with no autozoom set) the API and client will need to set it.

size

The size (<http://code.google.com/apis/maps/documentation/staticmaps/#Imagesizes>) must either be a string consisting of two numbers joined by the symbol "x", or a hash ref with width and height parameters. In either case the first number is the width and the second the height. If absent the Google API will be allowed to set the size as it sees fit.

format

The optional format (<http://code.google.com/apis/maps/documentation/staticmaps/#ImageFormats>) must be one of 'png8', 'png', 'png32', 'gif', 'jpg', 'jpg-baseline'. If absent the Google API will be allowed to set the format as it sees fit. Note that although the "json" method will pass this on, it seems to have no meaning in the dynamic API.

maptype

This must be one of the following: 'roadmap', 'satellite', 'terrain', 'hybrid's described in <http://code.google.com/apis/maps/documentation/staticmaps/#MapTypes>. The "json" method will translate these into numerical codes roadmap => 0, satellite => 1, terrain => 2 and hybrid => 3 as this makes it easy for the javascript code (<http://code.google.com/apis/maps/documentation/reference.html#GMapType.Constants>) to translate this numerical code into the client side codes. For example:

  var mapping = new Array(G_NORMAL_MAP, G_SATELLITE_MAP, G_PHYSICAL_MAP, G_HYBRID_MAP);
  var maptype = mapping[data.maptype];
    

mobile

This parameter should be either the string 'true' or 'false' and defaults to 'false'. The static API uses it to provide more robust tiles as described in <http://code.google.com/apis/maps/documentation/staticmaps/#Mobile>. However it seems to have no meaning for the dynamic API.

key

The mandatory API key. You can sign up for one at <http://code.google.com/apis/maps/signup.html>.

sensor

This parameter should be either the string 'true' or 'false' and defaults to 'false'. Both versions of the Google API require it (<http://code.google.com/apis/maps/documentation/staticmaps/#Sensor>) and this is reflected in this module by it being used by the "static_map_url" and "javascript_url" methods.

markers

If present the markers should be an array ref of marker specifications so that it can be used in a TMPL_LOOP. Each marker specification should be a hash ref and may contain whatever keys are required by the javascript client side code. It must however have a "location" field which must be interpretable by the Google API as a location. In general this means the location must be a string of the form "decimal,decimal", where the first decimal is the latitude and the second longitude. Other fields might include for example: id, title, href, icon. Generally these just get passed through by the "json" method and should be used by the client side code as it sees fit. Three fields that have a special meaning, "color", "size", "label" are those described by the static maps API (<http://code.google.com/apis/maps/documentation/staticmaps/#MarkerStyles>). The GIcon class (<http://code.google.com/apis/maps/documentation/reference.html#GIcon>) contains lots of ways of specialising the look and feel of the markers in the dynamic API; but I can find no easy way of consistently replicating the the static marker styles in the dynamic API. The only other field which gets special treatment is "title". The "json" method will encode the title field. So for example if a marker has a title field of 'Sclo&szlig;', then if the javascript code uses this as the title attribute when creating a GMarker, then hovering the mouse over that marker will display the German word for castle.

hl

This parameter specifies the language to be used. If absent the API will select the language. Only the dynamic javascript API seems to use this parameter as described in <http://code.google.com/apis/maps/documentation/#Localization>. As such this is used in the "javascript_url" method.

calculate_zoom_and_center

This function tales a reference to an array of marker specifications and a maximum zoom level and returns a pair consisting of a suggested zoom level and a center.

The algorithm works by iteratively building the following objects:

A set of points, starting with the first element of the array and adding the next one at each iteration.

Actually we don't actually have a variable for this, but without thinking about this set conceptually I cannot state the algorithm. The set starts of consisting of just the first marker location.

"($ctheta, $cphi)"

These numbers represent a central point of the set of points represented as radians. The algorithm does not guarantee that the point is the true centre but we treat it as the centre of a circle. This starts of by taking the first element and converting its latitude and longitude to radians.

$radius

This variable is initialised to 0.

The contract

The algorithm requires that at each iteration all the points in the set are at most $radius radians from ($ctheta, $cphi).

The iteration

We look at the next point. We look at the distance ($distance) between the new point and "($ctheta, $cphi)". If this is less than or equal to $radius the iteration is over. Otherwise the following happens:

  ($ctheta, $cphi)      = mid point of ($ctheta, $cphi) and the new point
  $radius               = $radius + 0.5 * distance between ($ctheta, $cphi) and the new point
    

At the end

We convert "($ctheta, $cphi)" back to latitude and longitude and logarithmically convert the radius to a zoom level.

I doubt that this algorithm is optimal but it seems quick, uses only one pass through the markers and can be seen in action at <http://testmaps.periapt.co.uk>. Also if you have a better one you can specify it by passing a suitable CODE ref or blessed scalar to the "autozoom" parameter of the constructor.

static_map_url

Returns a URL suitable for use with the static maps API based upon the arguments passed to the constructor.

javascript_url

Returns a URL suitable for use in loading the dynamic map API.

markers

This returns the marker array ref.

json

This function uses the JSON module to return a JSON representation of the object. It removes the API key as that should not be required by any javascript client side code. If any marker object has a title attribute, then that attribute is encoded so it will display correctly during mouse overs.

width

This returns the width of the image or undef if none has been set.

height

This returns the height of the image or undef if none has been set.

The markup

We probably have a template file, map.tmpl, some thing like the following:

  <html>
    <head>
      <title>Test Map Tutorial</title>
      <!-- This way we tell the javascript what URL to contact the server with. -->
      <link href="/map_json" id="get_init_data"/>
      <!-- This will be filled in with the correct URL to load the Google maps javascript API. -->
      <script type="text/javascript" src="<TMPL_VAR NAME="maps.javascript_url()">"></script>
      <!-- This will load the yui API. If you use a different javascript API this would obviously change. -->
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/json/json-min.js"></script>
      <!-- This loads our javascript code. -->
      <script type="text/javascript" src="/js/maps.js"></script>
    </head>
    <body>
      <!-- This div will be completely replaced by the Google API and is identified by #map_canvas. -->
      <div id="map_canvas">
        <!-- This image will be loaded by the static Google map API. It will be available whilst the
                javascript based map is loading and if javascript is turned off
        -->
        <div><img
                alt="Test map"
                src="<TMPL_VAR NAME="maps.static_map_url()">"
                width="<TMPL_VAR NAME="maps.width()">"
                height="<TMPL_VAR NAME="maps.height()">"
                />
        </div>
        <!-- The following will be used if javascript is disabled. 
             We can use it display information that would normally be obtained by
             hovering over or clicking on markers on the dynamic map display.
        -->
        <noscript>
             <table>
               <TMPL_LOOP NAME="maps.markers()">
                 <tr>
                   <td class="google_<TMPL_VAR NAME="this.color">"><TMPL_VAR NAME="this.label"></td>
                   <td>
                      <TMPL_IF NAME="this.href">
                      <a href="<TMPL_VAR NAME="this.href">">
                      </TMPL_IF>
                      <TMPL_VAR NAME="this.title">
                      <TMPL_IF NAME="this.href">
                      </a>
                      </TMPL_IF>
                    </td>
                 </tr>
               </TMPL_LOOP>
             </table>
        </noscript>
      </div> <!-- end of #map_canvas -->
    </body>
  </html>

The perl

The code to actually produce the web page must look something like this:

        use HTML::Template::Pluggable;
        use HTML::Template::Plugin::Dot;
        use Geo::Google::MapObject;
        my $t = HTML::Template::Pluggable->new(filename => 'map.tmpl');
        my $map = Geo::Google::MapObject->new(....);
        $t->param(maps=>$map);
        print $t->output;

This is all that would be needed in a javascript free environment. With javascript enabled the client is going to ask for the same data in a JSON format (at least we are only supporting JSON). The code to service that request will look something like:

        use Geo::Google::MapObject;
        my $map = Geo::Google::MapObject->new(....);
        print $map->json;

The javascript

As indicated in the markup above we are expecting the javascript to be in a file called maps.js. We expect it to look something like the following:

  function mapInitialize() {
      /* Read the "link" element that tells us how to contact the server. See markup above. */
      var get_init_data = YAHOO.util.Dom.get('get_init_data').href;
      /* Build the AJAX callback object consisting of three parts.  */
      var callback =
      {
          /* Part I: Function called in the event of a successful call. */
          success: function(o) {
                /* Convert the JSON response into a javascript object.
                   This structure corresponds to the Geo::Google::MapObject in perl
                   as intermediated by its "json" method.
                 */
                var data = YAHOO.lang.JSON.parse(o.responseText);
                if (GBrowserIsCompatible()) {
                        /* Build up the Map object which will replace #map_canvas in the above markup. */
                        var mapopt = {};
                        if (data.size) {
                                mapopt.size = new GSize(parseInt(data.size.width), parseInt(data.size.height));
                        }
                        var markers = data.markers;
                        var map = new GMap2(YAHOO.util.Dom.get("map_canvas"), mapopt);
                        var maptype = null;
                        if (data.maptype) {
                                maptype = o.argument[parseInt(data.maptype)];
                        }
                        var zoom = null;
                        if (data.zoom) {
                                zoom = parseInt(data.zoom);
                        }
                        var center = markers[0].location;
                        if (data.center) {
                                center = data.center;
                        }
                        map.setCenter(GLatLng.fromUrlValue(center), zoom, maptype);
                        map.setUIToDefault();
                        /* Now for each marker build and add a GMarker object */
                        for(var i = 0; i < markers.length; i++) {
        
                                var opt = {title: markers[i].title};
                                if (!markers[i].href) {
                                        opt.clickable = false;
                                }
                                if (markers[i].icon) {
                                        opt.icon = new GIcon(G_DEFAULT_ICON, markers[i].icon);
                                        if (markers[i].shadow) {
                                                opt.icon.shadow = markers[i].shadow;
                                        }
                                }
                                var mark = new GMarker(GLatLng.fromUrlValue(markers[i].location), opt);
                                if (markers[i].href) {
                                        mark.href = markers[i].href;
                                        GEvent.addListener(mark, "click", function(){window.location=this.href;});
                                }
                                map.addOverlay(mark);
                        }
                }
          },  /* End of Part I */
          /* Part II: Function called in the event of failure */
          failure: function(o) {alert(o.statusText);},
          /* Part III: Data that is passed to the success function.
             We are using this to map from numerical maptypes that Geo::Google::MapObject has passed us to the 
             forms used in Google maps API. 
           */
          argument: [G_NORMAL_MAP, G_SATELLITE_MAP, G_PHYSICAL_MAP, G_HYBRID_MAP]
      }; /* End of constructing the AJAX callback object. */
      /* This calls the server which should hopefully kick off callback.success with lots of lovely data. */
      var transaction = YAHOO.util.Connect.asyncRequest('GET', get_init_data, callback, null);
  } /* end of mapInitialize function */
  /* This will make sure that we call the above function at a good time. */
  YAHOO.util.Event.onDOMReady(mapInitialize);
  /* We still have to do the memory cleanup ourselves. */
  YAHOO.util.Event.addListener(window, 'unload', 'GUnload');

Taking it further

There are lots of variations that can be done with this. The Geo::Google::MapObject object will pass on all fields it does not recognize via the "json" function and these can be used by the javascript in whatever way required. Similarly fields added to the marker specification will be passed by the "markers" function and can be used in the template in whatever way required.

You can also make the markers draggable and have the act of dragging a marker update data on the server. There is an example of where this has been done at <http://testmaps.periapt.co.uk>. The details of how this is done depend intrinsically on the implementation of the data storage on the server. I would suggest that in general the steps required to make the markers draggable might be as follows:

Clean interface to the data storage.

I think this is a clear case where an ORM (<http://en.wikipedia.org/wiki/Object-relational_mapping>) offers some advantages. You could look at DBIx::Class or write your own interface using DBI.

Derive a class from Geo::Google::MapObject.

Your derived class constructor should get the data you need from the data storage interface layer, use it to create a Geo::Google::MapObject and bless that into your derived class.

Provide URLs that update the data underlying your map objects.

These will probably be POST methods and need not return anything other than an "OK" string. They should probably call the data storage interface layer directly to update the data. There is no point creating a map object merely to update the underlying data.

Add link elements to your markup indicating which URL is needed to update the marker data.

  <link href="/move_marker" id="move_marker"/>
    

An advantage of using these link elements is that you might have multiple maps to manage. By using the link elements to communicate with the client side, a lot more code and templates can be reused.

Get the javascript side to read your new link elements.

  var move_marker = YAHOO.util.Dom.get('move_marker').href;
    

Add a "draggable" flag to the GMarker constructor

  var opt = {title: markers[i].title, draggable: true};
    

Make sure your GMarkers are labelled in a way that your server can understand

Just after the GMarker object, mark, has been created add

  mark.label = markers[i].label;
    

Make your GMarker object subscribe to the "dragend" event.

  GEvent.addListener(mark,
                     "dragend",
                     function(latlng) {
                             var location = latlng.toUrlValue(12);
                             var postdata = "id="+this.label+"&location="+location;
                             YAHOO.util.Connect.asyncRequest('POST',
                                                             move_marker,
                                                             {
                                                                success: function(o){},
                                                                failure: function(o) {alert(o.statusText);},
                                                                argument: []
                                                             },
                                                             postdata);
                     });