Click on the screenshots below to open the screencasts. Watching a screencast requires the Adobe Flash Player plug-in. You can navigate through a screencast by moving the slider or pressing the backwards/forwards buttons.
- This Firefox extension adds a toolbar with all sorts of nifty tools for web developers.
- This screencast just shows how a few of them relate to the Maps API, but you should experiment with all the tools and see how you might use them in the future.
- Outline Images
- This tool is useful for understanding what parts of a page are images and how those images are positioned and sized. In the case of Maps, it shows you how the Maps API is really composed of many images tiled in a div.
- Now you can see the map is just a series of 256*256 tiles.
- Image Information
- This tool is useful for seeing all the images that make up a page in their original, un-scaled and un-repeated form. It's a good way of seeing how a web designer has manipulated images with CSS in order to create their site.
- Notice the URL gives an x, y, and zoom level (this is used in the getTileUrl function for map types).
- The Web Developer Toolbar comes with a Ruler that can be used to figure out exact measurements where pixel positioning is necessary, like with Maps API controls.
- Drag the ruler to the new position where you'd like to put the control.
- The Error Console is natively available in all Firefox browsers.
- Errors such as undefined variables or functions will show up here, with a pointer to the line number if available.
- Now it becomes obvious my error: I tried using the variable 'point' though I'd defined 'latlng'.
- First we need to enable debugging (off by default).
- Turn both of the disable script debugging options off.
- IE will halt execution of the script with the error and line number. If you want to see the actual script causing the error, click "Yes."
- The arrow points to the problem line. It is now obvious our error of defining 'latlng' and using 'point' instead.
- If you don't "stop debugging", IE will stay in a halted state of execution and be unusable.
- Firebug is a Firefox extension that places a icon in your status bar that can be expanded to provide a multiple tab UI with various web development and debugging tools, a few of which we'll review in this screencast. It is an incredibly powerful tool - just be aware that having it enabled all the time may slow down your normal browsing experience.
- SCRIPT tab
- Click on Firebug icon
- The Maps API loader script.
- This script tag is loading in v=2.93
- NET tab
- This tab shows you all the requests going over the network: retrievals of script files, images, xml http requests, etc. This is useful for debugging Maps API classes that make calls over the network for information: GClientGeocoder, GGeoXML, and GDirections.
- This calls GClientGeocoder.getLatLng() which just returns a point.
- Click on Firebug icon
- Geocode request.
- Click params to see what the request sent.
- Click Response tab to see the server response.
- The status code correlates to the GGeoStatusCode.
- You can see that 200 is a successful query, as expected.
- Let's try a query that definitely doesn't exist in the world.
- The new query.
- The new GGeoStatusCode.
- This indicates a bad address, as expected.
- HTML tab
- The HTML tab in Firebug lets you inspect the DOM elements on the page, as well as edit their HTML and CSS styles. This lets you quickly play with small changes in style or content.
- Mouseover parts of the page to have their HTML and CSS highlighted in the HTML tab.
- You can edit the HTML here.
- You can edit styles and add more here. Note that this shows where styles have cascaded from for the selected element.
- Console tab
- Click for Firebug console
- The console can output String messages similar to GLog.write.
- The output is easy to copy and paste to elsewhere.
- The console can also output more detailed information about non-String variables in your code (in this case, a GLatLng object), simply by writing console.log(variableName).
- Clicking on the console output will bring you to the DOM tab with a detailed breakdown of the object's member functions and properties.
- The console output is displayed on the left-hand side.
- The Maps API comes with its own debug console, GLog. Though it doesn't provide the same variable inspection functionality as Firebug, it has the advantage of working on every browser in the same way and is a great alternative to alert().
- This example downloads an XML file and creates markers based on lat/lng attributes in it. We'll demonstrate debugging the lat/lng with alert vs. GLog.
- Now we'll add the alert() statement in the for loop.
- Now we'll replace the alert with GLog.write().
- GLog outputs your statement in a scrolling console with timestamps.
The following links should be useful for you in following this screencast or finding out more about debugging: