Archive for the ‘Google’ Category

* Declarative Google Maps

Posted on April 7th, 2007 by Dave Johnson. Filed under AJAX, Components, Declarative Programming, Google, Map, Web2.0, XML.

We are pretty big fans of the declarative approach to Ajax. Our up and coming Complete UI Ajax component product line is firmly based around declarative programming. The idea behind this is that the developer can use HTML like markup to define the majority of the component functionality while still being able to write a little bit of JavaScript to get the extra 20% of custom functionality that they need.

As an example of this I have put together a declarative Google Map. Currently it only supports a few declarative tags but it at least serves to give you an idea of how a regular JavaScript component could be wrapped declaratively. It could also be simplified quite a bit by building a JavaScript component from the ground up with declarative programming in mind - as the Nitobi framework enables of course :)
If you went about putting a Google Map into a web page imperatively, it would look something like this:

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(49.290327, -123.11348), 12);
var polyline = new GPolyline([
    new GLatLng(49.265788, -123.069877),
    new GLatLng(49.276988, -123.069534),
    new GLatLng(49.276988, -123.099746),
    new GLatLng(49.278108, -123.112106),
    new GLatLng(49.2949043, -123.136825),
    new GLatLng(49.3029641, -123.145065)
    ], “#ff0000″, 10);

The result of this is a nice Google Map that shows part of my daily bike ride to work. If you view the source of the web page you will see just that same code.

On the other hand, we could make that same web page declaratively meaning that we don’t have any extra JavaScript code to write but instead define our Google Map through custom HTML markup. This has the advantage, on top of the many advantages (and disadvantages) of declarative programming in general, that most web developers are familiar with HTML markup though might not be as comfortable with writing JavaScript code. So the equivalent declarative Google Map might look like this:

<g:map id="map" width="370px" height="380px" smallmapcontrol="true" maptypecontrol="true">
  <g:center zoom="12">
    <g:point lat="49.2853" lng="-123.11348"></g:point>
  <g:polyline color="#FF0000" size="10">
    <g:point lat="49.265788" lng="-123.069877"></g:point>
    <g:point lat="49.276988" lng="-123.069534"></g:point>
    <g:point lat="49.276988" lng="-123.099746"></g:point>
    <g:point lat="49.278108" lng="-123.112106"></g:point>
    <g:point lat="49.294904" lng="-123.136825"></g:point>

All the same elements are there as the imperative JavaScript version but there is no code to worry about. And, of course, the result is also the same. Here is a direct link to the source code - the top 1/3 of the code is the only interesting stuff, the rest is just helper functions that poached from the Nitobi Ajax Toolkit.

Take a look at the source code if you are interested in the details. Btw it currently has only been tested in Firefox 1.5 and IE 6/7.

This will be some of what I talk about in my session at XTech.


* Podcasting with Coté

Posted on November 1st, 2006 by Dave Johnson. Filed under AJAX, Google, Podcast, RIA, Redmonk, Web2.0.

We had a fun time yesterday shooting the shit with Coté discussing what is going on at Nitobi, OpenAjax Alliance happenings, RIA, the state of Ajax (always the innevitable topic) and the old Enterprise Ajax book - which is now ready for pre-sales :) - amongst several other things.

On another note - that whole JotSpot deal is pretty interesting :)


* Nitobi Grid and Google Maps Mash’d-up

Posted on August 2nd, 2006 by Dave Johnson. Filed under AJAX, Components, Google, Map, Web2.0.

I have been meaning to do some mashup action for a long time now and finally found some time. Andre tried to steal my screenshot cause I originally made it for his talk at GeoWeb. I have just made a screencast of it to give people an idea of how it all works.

The idea was to use our Ajax Grid control to provide a nice interface into which addresses could be entered and then plotted on a Google Map.

So what this enables people to do is copy addresses from MS Word, Excel or even OpenOffice products - no proprietary tricks here. Of course the Grid currently only works in FF and IE (sorry safari users). Then when I click on the “plot addresses” button (which could also happen every time I edit a record in the Grid for example) a request is made to the Google server for each record in the Grid and it does the geocoding - ie converting an address to lat/long - which can then be plotted on the map. It is a pretty sweet thing to be able to take a bunch of addresses and get them plotted on am online map!

Here is the screencast (sorry about the crappy audio :)) and I will try and get the sample up in the next few days so that people can actually try it out!

Technorati Tags: google, ajax, map, web2.0