v3 BoundsBox library provides constructors to create a rectangular overlay by LatLngBounds or by LatLng plus km-dimension (also miles or nautic miles). You can also overlay images that scale with zoom.
It is still missing an overlay with pixel dimensions. For tooltips and other labeling. It is coming.
I haven't included the 'tiptool' to BoundsBox library yet. There are a few things still under development.
I am impressed with 'universional' concept of a library that Paul Kulchenko has implemented. He has written some impressive Canvas experiments that work with v2 and v3 with one and only script.
That is the way that Google Maps API libraries should be written.
Wednesday, October 14, 2009
Thursday, September 24, 2009
Gecoder response structure
I made simple test pages for version 2 and version 3 that display the geocoder response object contents prettyprinted.
First I was using toSource() method of Firefox which is a handy way to have a look inside objects. You could say that is opposite to eval().
Using non-standard toSource() debugging method means that the pages would work only with FF. I think that all the browsers have a similar method internally, but it is exposed only in Gecko browsers.
I switched to JSON.stringify(). That is also built in FF3.1+ and even in IE but only in IE8 mode. The function is made cross-browser by loading Douglas Crockfords json2.js script. You can get it from json.org.
The line breaks, spaces and indents are generated by beautify.js from jsbeautifier.org
First I was using toSource() method of Firefox which is a handy way to have a look inside objects. You could say that is opposite to eval().
Using non-standard toSource() debugging method means that the pages would work only with FF. I think that all the browsers have a similar method internally, but it is exposed only in Gecko browsers.
I switched to JSON.stringify(). That is also built in FF3.1+ and even in IE but only in IE8 mode. The function is made cross-browser by loading Douglas Crockfords json2.js script. You can get it from json.org.
The line breaks, spaces and indents are generated by beautify.js from jsbeautifier.org
Monday, September 14, 2009
Zoom events
The following concerns version 2 of API.
There is a single zoomend(old, new) event in documentation. However there are a few additional undocumented events that return a lot of data about zoom action.
'zoomto' is triggered always when user changes zoom setting. It returns two parameters. The first one is a string that indicates how the zoom was started. The second is an object {infoWindow: boolean} that tells if the info window is open. Following string values are discovered:
- "zi" or "zo" When zoom button is clicked
- "zs_drag_zi " or "zs_drag_zo" When zoom slider is moved
- "zb_click_zi" or "zb_click_zo" When zoom bar is clicked
- "wl_zi" or "wl_zo" By scrollwheel zoom
- "key_zi" or "key_zo" When zoomed by keyboard +/-
If we have continuousZoom enabled, we get more events: 'zoomstart' and 'zooming'.
'zooming' is triggered repeatedly while animated zoom is under progress. The interval is a few tens of milliseconds.
'zoomstart' is triggered when continuous zoom is started by dblclick or scrollwheel. Its first parameter is -1 or 1 indicating the direction of the started zoom. The second parameter is a GLatLng mouse pointer position. By double rightclick zoomout the second parameter is a blank object.
I have discovered a third parameter, a boolean that is true only by dblclick-zoom-in?
When triggering a continuous zoom, we get a series of events:
There is a single zoomend(old, new) event in documentation. However there are a few additional undocumented events that return a lot of data about zoom action.
'zoomto' is triggered always when user changes zoom setting. It returns two parameters. The first one is a string that indicates how the zoom was started. The second is an object {infoWindow: boolean} that tells if the info window is open. Following string values are discovered:
- "zi" or "zo" When zoom button is clicked
- "zs_drag_zi " or "zs_drag_zo" When zoom slider is moved
- "zb_click_zi" or "zb_click_zo" When zoom bar is clicked
- "wl_zi" or "wl_zo" By scrollwheel zoom
- "key_zi" or "key_zo" When zoomed by keyboard +/-
If we have continuousZoom enabled, we get more events: 'zoomstart' and 'zooming'.
'zooming' is triggered repeatedly while animated zoom is under progress. The interval is a few tens of milliseconds.
'zoomstart' is triggered when continuous zoom is started by dblclick or scrollwheel. Its first parameter is -1 or 1 indicating the direction of the started zoom. The second parameter is a GLatLng mouse pointer position. By double rightclick zoomout the second parameter is a blank object.
I have discovered a third parameter, a boolean that is true only by dblclick-zoom-in?
When triggering a continuous zoom, we get a series of events:
- zoomstart
- zoomto
- zooming
- zooming
- zooming
- zoomend
Friday, August 28, 2009
Accessibility and Google Maps
My understanding about accessibility of a web page is, that all its contents must be accessible without a mouse.
So was the Map Kitchen examples written. Take categories example and you can open any info window by [Tab] key, check the checkboxes by [space]. ([Shift[Tab]] to go back).
Accessibility is in the hands of the developer who writes the code for a map page. It is not built in Google Maps.
Patrick H. Lauke from Opera does not accept my opinion. We had a short public discussion on the forum and our opinions are:
Patrick:
Google Maps control elements (zoom, nav-buttons...) should be keyboard accessible
My opinion:
Those functions are easily made keyboard accessible by the page developer but they are not important. The contents must be accessible. There should be a method to open any info window without mouse.
Patric has made great work with a script that converts Google Maps control buttons keyboard accessible
So was the Map Kitchen examples written. Take categories example and you can open any info window by [Tab] key, check the checkboxes by [space]. ([Shift[Tab]] to go back).
Accessibility is in the hands of the developer who writes the code for a map page. It is not built in Google Maps.
Patrick H. Lauke from Opera does not accept my opinion. We had a short public discussion on the forum and our opinions are:
Patrick:
Google Maps control elements (zoom, nav-buttons...) should be keyboard accessible
My opinion:
Those functions are easily made keyboard accessible by the page developer but they are not important. The contents must be accessible. There should be a method to open any info window without mouse.
Patric has made great work with a script that converts Google Maps control buttons keyboard accessible
Usability and Google Maps
What does usability and Google Maps have in common. At least one thing, they are synonyms.
Map is the user interface for any data - any. That is the reason why a search engine company acquired a startup that had the keys for that user interface.
We who write map pages, must keep in mind, that we are using map as the user interface because it is the most intuitive way to present any data. Our client or boss may see map as a decoration on the web page. Try to make them see the difference between a list of addresses or that list presented on a map.
I was very delighted to see that a blog called "In usability we trust" talks a lot about Google Maps. The blog is kept by a Swedish guy called Gabriel Svennerberg. He has written some high quality articles about Google Maps API.
Map is the user interface for any data - any. That is the reason why a search engine company acquired a startup that had the keys for that user interface.
We who write map pages, must keep in mind, that we are using map as the user interface because it is the most intuitive way to present any data. Our client or boss may see map as a decoration on the web page. Try to make them see the difference between a list of addresses or that list presented on a map.
I was very delighted to see that a blog called "In usability we trust" talks a lot about Google Maps. The blog is kept by a Swedish guy called Gabriel Svennerberg. He has written some high quality articles about Google Maps API.
Tuesday, August 11, 2009
Images on v3 map
BoundsBox extension was used for drawing rectangles on map a few posts ago.
The new version of BoundsBox (1.0) has option to insert images inside (visible or invisible) rectangles. The image is attached in a draggable pane of map. So it pans with map. It scales when map is zoomed. It is attached below markers, so it doesn't eat marker clicks. The behavior is equal to GGroundOverlay of v2 api.
A few more options and methods were introduced with the new version. They mainly serve image handling like opacity and z-index. Events 'imageloaded' and 'imageloaderror' are also provided.
See an example with a table of options and methods.
Update v1.1
The most latest version provides also an alternative constructor KmBox(). Instead of LatLngBounds it takes LatLng and kmX, kmY dimensions as its parameters. As a side product we got LatLng.destinationLatLng(bearing, distance) method. That calculates LatLng 'that many kilometers from this LatLng to that compass bearing'.
The new version of BoundsBox (1.0) has option to insert images inside (visible or invisible) rectangles. The image is attached in a draggable pane of map. So it pans with map. It scales when map is zoomed. It is attached below markers, so it doesn't eat marker clicks. The behavior is equal to GGroundOverlay of v2 api.
A few more options and methods were introduced with the new version. They mainly serve image handling like opacity and z-index. Events 'imageloaded' and 'imageloaderror' are also provided.
See an example with a table of options and methods.
Update v1.1
The most latest version provides also an alternative constructor KmBox(). Instead of LatLngBounds it takes LatLng and kmX, kmY dimensions as its parameters. As a side product we got LatLng.destinationLatLng(bearing, distance) method. That calculates LatLng 'that many kilometers from this LatLng to that compass bearing'.
Curing IE8 complications
Many map pages work fine with all the other browsers but not IE8. Clicks seem to take place far away from the point that user actually clicked.
The bug has been archived in IE8 issue list since beta times. The only known workaround is to force IE8 to "IE7 combatibility mode".
Investigating Microsofts own code reveals that even they have not found any other workaround. You can find in the head section of Bing maps:
And in maps.google.com:
Those tags make IE8 behave more like IE7 and cure the click coordinate issue. If someone is really interested what they actually do, I would recommend starting from this excellent study. What I learned about that article, is that the tag will not pass HTML5 validation.
The bug has been archived in IE8 issue list since beta times. The only known workaround is to force IE8 to "IE7 combatibility mode".
Investigating Microsofts own code reveals that even they have not found any other workaround. You can find in the head section of Bing maps:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
And in maps.google.com:
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 />Those tags make IE8 behave more like IE7 and cure the click coordinate issue. If someone is really interested what they actually do, I would recommend starting from this excellent study. What I learned about that article, is that the tag will not pass HTML5 validation.
Subscribe to:
Posts (Atom)
