Computing in the real world
SEARCH FOR: IN:
Guest  Level 00    Register Log in

Real World Computing

Bowled a Googly

9th April 2008 [PC Pro]

function createMarker(point,venue) {

var marker = new GMarker(point,pointerIcon);

GEvent.addListener(marker, "click", function() {html = venue});

marker.openInfoWindowHtml(html);

Gmarker[i] = marker;

return marker;

}

The last bit of that function also creates the HTML that will display in the information balloon that appears if a user clicks on the pushpin. Obviously, you can put anything you want in there; I've just put the venue name for illustration. Now you walk through your data and on each record call a Google API function GLatLng and assign that to a variable, which I've called "point":

var point = new GLatLng(lat,lng);

Having got this variable, you can now call the createMarker function, passing the "point" variable and the venue name via the variable "venue":

var marker = createMarker(point,venue);

Now you need to create an overlay on your map with this point on it (note that for each point you need a separate overlay):

map.addOverlay(marker);

Finally, after you've walked all the data and reached the last record, you need to tell Google Maps API to draw the map, which you do so:

request.send(null);

That's the basic way you go about putting multiple markers onto a Google Map, and the rest of the code is up to you! If you want to take a look at my first attempts, click on www.pcpro.co.uk/links/164wa1.

Visual Web Developer<

Google Maps requires all this coding to be done in JavaScript, but until recently debugging and single-stepping in JavaScript code was notoriously difficult. For this project, it was made even trickier, as my code would be making a call into the Google API and hopefully returning the desired result; if not, it would take some serious detective work to find out what was going on. In the past, I'd have used the excellent debugging tools you can add to Firefox, such as Firebug and the "Venkman" JavaScript debugger, but what I wanted here was something that not only helped me with the syntax of the code but also gave me the sort of debugging, single-stepping and variable watching I was used to in - dare I say it - Visual Basic 6!

Luckily, I have such a tool installed on the Windows VM section of my Mac: Visual Web Developer 2008 Express, the web technology version of Microsoft's Visual Studio. Glancing back at the very first line of this column, here's a product that disproves my statement because Visual Web Developer 2008 Express gives you a lot for absolutely nothing: like all the Express versions of Microsoft programming products, it's a free download.

The experience of developing my JavaScript application became a joyful one, as at last I could edit my server-side code, client-side JavaScript, CSS stylesheets and HTML code all in a single programming environment that understood what I was typing and helped with the syntax using IntelliSense. I haven't been quite so enthusiastic about any web development tool since Dreamweaver 4, and that's bearing in mind that my experience of Dreamweaver is that it's become slower and less stable with every release. I've heard rumours that Adobe won't be extending Dreamweaver to handle .NET 3.5 and will instead concentrate on the PHP/MySQL web development model for future versions. With this in mind, my company is seeking an alternative, and Visual Web Developer is a tool that suits programmers rather than designers, who have the Microsoft Expression suite for their purposes.

Continued....