tag:blogger.com,1999:blog-31408441860622071742024-03-05T16:06:02.204-08:00Google Maps API tricksThis is my notebook for Google Maps API code snippets and tricks. I collect them from the forum, from other people's source code and sometimes create by myself.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.comBlogger58125tag:blogger.com,1999:blog-3140844186062207174.post-5801182709661724162011-05-08T18:06:00.000-07:002011-05-08T18:24:21.502-07:00Zoom tooltip hackAverage users don't care about zoom level numbers, but some people do. Developers do.<br />
<br />
I created a 'semihidden' zoom level display for my pages. Google provides hints like "zoom in" and "zoom out" if you hover the zoom control element (slider). I thought that average map users already know those things.<br />
<br />
Try hovering zoom slider of the first <a href="http://koti.mbnet.fi/ojalesa/quadtree/quadtree_intro.htm">quadtree example page</a>. Yes, hovering the zoom slider will display also meters/px resolution. That is an extra bonus for those who are interested in the World.<br />
<br />
Have a look in the source code. It is commented there as "zoom tooltip hack". Feel free to copy the hack, if you like it. You can molest the code any way you like. Shall this post be the license.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com2tag:blogger.com,1999:blog-3140844186062207174.post-73557438187627041322011-05-05T18:27:00.000-07:002011-05-05T18:30:19.956-07:00Distance Matrix<a href="http://code.google.com/apis/maps/documentation/javascript/services.html#distance_matrix">Distance Matrix service</a> was introduced in the latest update of v3 API. It returns maximum 100 driving distances and durations by a single request. <a href="http://code.google.com/apis/maps/documentation/javascript/reference.html#DistanceMatrixService">Reference</a>.<br />
<br />
All of you who have a store locator, can now add true driving distances and estimated driving times in search results. Also you can filter out results that exceed a distance limit. If user searches by 100 km radius, you may want to return only results that have a true driving distance less than 100 km.<br />
<br />
It is like driving directions without directions. Some people have tried to implement something similar by making multiple driving distance requests. Many of them faced problems with the asynchronous responses not coming back in the same order that requests were made. The new service is very simple to use.<br />
<br />
It has travelMode option too. So it can be used for walking distances in city maps.<br />
<br />
This is a useful service.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com3tag:blogger.com,1999:blog-3140844186062207174.post-76087294839092727172011-04-28T18:32:00.000-07:002011-04-28T18:37:10.862-07:00QuadtreeQuadtree is a powerful spatial indexing technique. <a href="http://en.wikipedia.org/wiki/Quadtree">Wikipedia</a>. <br />
<br />
Every now and then I been thinking to implement a collision detect function using quadtree. Playing with quadtrees is so fascinating that I haven't got as far as collision detect, but I have a simple general <a href="http://koti.mbnet.fi/ojalesa/quadtree/quadtree_intro.htm">quadtree demo page</a> online. Play with it. It's inspiring.<br />
<br />
If you are interested in experimenting, I enclosed the basic functions in <a href="http://koti.mbnet.fi/ojalesa/quadtree/quadtree.js">QT.js library</a>. The collision detector will be there too but I have some different applications in mind first.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com1tag:blogger.com,1999:blog-3140844186062207174.post-20763649858312934102011-03-14T13:45:00.000-07:002011-03-14T13:48:39.912-07:00Category sidebar - there is no sense without priorityThanks for many of you that been applying the category sidebar script I wrote a long time ago for v2. Sure It works on desktop but what happens if all the entries don't fit in the limited viewport of a mobile browser?<br />
<br />
Web has changed since. Now we have to make pages that can be used by mobile browsers too. The screen size can be equal or smaller to the first Mac.<br />
<br />
The idea of 'gategory' is still living strong. I have extended makeMarker so that each marker has a 'cat' property. If you click one category visible, all those markers and their sidebar entries do not simply fit in view in iPhone. Also remember that mobile 'touch' devices do not support scrollbars at all. They simply cut the material! (People are shouting about Flash, hehe!)<br />
<br />
We have to bring one more parameter to a marker - that is priority. In my current design, the default priority is the distance from map center.<br />
<br />
The smallest mobile screen can display a sidebar with a few (<10) entries. You have to decide, which of those 1000 they are.<br />
<br />
Ideas?Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com2tag:blogger.com,1999:blog-3140844186062207174.post-44097615086589765622010-12-10T18:12:00.000-08:002010-12-11T03:19:14.926-08:00v3 Marker z-index, the way I thought it was<b>The way it is </b><br />
<br />
Marker.getZindex() returns 'undefined' if you did not set any value for it. Looking under the hood reveals that actually there is a latitude dependent value set for the marker DOM element. The value seems to be equal to 'top' position of the marker in map container. That is clever. It takes care that markers are displayed in right order by latitude (South on front). But why is the value not returned?<br />
<br />
Set any value for Marker z-index. Now getZIndex() returns the value and that set for the Marker DOM element. So setting a z-index value of your own ruins the order set by API.<br />
<br />
<b>The way it might be </b><br />
<br />
User z-index and actual DOM z-index should be separated.<br />
<br />
Markers should have the default DOM z-index as it is now. <br />
<br />
Marker.getZindex() should return zero if you did not set any z-index.<br />
<br />
<div style="color: red;"><span style="font-size: small;">Setting a z-index value would be added to the default value.</span></div><br />
So user z-index would be relative to the actual DOM value.<br />
<br />
API would take care of order by latitude (of overlays with equal z-index) like it currently does without any z-index settings.<br />
<br />
<b>Why</b><br />
<br />
That would make the zIndex property of Marker, Circle, InfoWindow etc much easier to use. Currently you have to rewrite all the z-index values if you want to raise z-index of a single marker..<br />
<br />
I have a feeling that it was originally meant to work that way.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com1tag:blogger.com,1999:blog-3140844186062207174.post-67932264372391803892010-10-16T11:16:00.000-07:002010-10-16T11:46:18.588-07:00Automatic API v3 referenceI have a test page that analyzes contents of google.maps namespace. I've had it for a long time. The trouble was that controlling the version needed some hackery with v3. Now when the version control was released, I decided to polish and share the page. Actually it is a site of three pages, one for each version. <a href="http://koti.mbnet.fi/ojalesa/v3/v3_methods_frozen.htm">Frozen</a> (3.0), <a href="http://koti.mbnet.fi/ojalesa/v3/v3_methods_release.htm">Release</a> (3.1) and <a href="http://koti.mbnet.fi/ojalesa/v3/v3_methods_nightly.htm">Nightly</a> (3.2).<br />
<br />
API v2 is from 2005 and no namespace thinking was applied. The constructors and all the stuff that v2 offers is introduced in global scope. I never faced any troubles with that but nowadays some people like it as 'bad programming practice'. Actually it really was much trickier to write a similar test page for v2. Global scope (window) has a lot of stuff that is introduced by the browser and must be filtered.<br />
<br />
The test page scans google.maps object by a for-in loop. No rubbish is found and no additional filtering is needed. The results contain the constructors and some objects. Those are listed on page and also on the index in the header. All the members that were found are scanned by a for-in loop again. This time looking inside prototype objects. If prototype is not found, the object itself is looped. Resulting properties are listed in a row.<br />
<br />
The pages are coded for Firefox only. Firefox presents some unique features for this kind of work. One of them is .toSource() method of Object. It creates a string representation of source code. Firefox presents source code in nice prettyprinted format in alert() dialog box.<br />
<br />
With Firefox, you can click any listed method on page and see its internal code. Also there are links to search the method name from documentation, API forum or Google Code Search.<br />
<br />
The resulted listing proves that API v3 is written following good programming practices. Almost no internal variables are leaking. The internal source code of the constructors and their methods doesn't reveal much. Still it is worth exploring, you always find something that deepens your understanding about API.<br />
<br />
The documentation practice of v3 is different to v2 in the way that there are not many undocumented methods in v3. Still you can find some. Today I saw some new methods of Marker.<br />
<br />
You can use the pages for comparing versions. Yes, they are documented separately but still you can find something meaningful.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com1tag:blogger.com,1999:blog-3140844186062207174.post-47037567682949150302010-04-27T17:43:00.000-07:002010-04-27T17:49:32.587-07:00Circle in v3Circle object of v3 creates a circular overlay as expected. It is more useful than I first thought.<br />
<br />
If you want to zoom your map to show an area of say 50 km radius, that would mean some maths. Create a Circle() of 50 km radius and take its bounds by now provided getBounds(). You can use the bounds to zoom the map by fitBounds(). No calculations needed. <a href="http://koti.mbnet.fi/ojalesa/v3/circleAndBounds.htm">An example</a>.<br />
<br />
Circle can be used as a marker as well. It is clickable and it works as an anchor for InfoWindow. Marker keeps its size when you zoom. Circle does not but Circle has a minimum size based on stroke width. That is actually nice behavior in many cases. Now there is an <a href="http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_circle.htm">updated version of makeMarker()</a>. It creates a Circle instead of Marker if you set any value to 'radius' option.<br />
<br />
'title' option does not create a flyover tooltip. However Circle supports all the usual mouse events. So you can create a custom tooltip for the purpose.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com3tag:blogger.com,1999:blog-3140844186062207174.post-59547060760020755812010-02-21T20:13:00.000-08:002010-02-21T20:13:05.418-08:00Custom iconsJust discovered a <a href="http://code.google.com/p/google-maps-icons/">custom icon collection project</a> on Google Code. There are more than 900 icons this far.<br />
<br />
It would be nice if those were provided in sprite format. Happily there are sprite-making services. <a href="http://spriteme.org/">SpriteMe</a> is the most advanced of those.<br />
<br />
.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com4tag:blogger.com,1999:blog-3140844186062207174.post-89153996311115029742010-02-08T17:23:00.000-08:002010-02-08T17:23:37.130-08:00clearOverlays() in V3There is no clearOverlays() in API v3. Some practices have been presented. I think this is the simpliest so far.<br />
<br />
Push all the overlays in an array when created (as usual). Following code will clear both map and the array:<br />
<br />
<div style="font-family: "Courier New",Courier,monospace;"> while(overlays[0]){</div><div style="font-family: "Courier New",Courier,monospace;"> overlays.pop().setMap(null);</div><div style="font-family: "Courier New",Courier,monospace;"> }</div><br />
pop() method of an array removes the last element of an array, and returns that element. 'while' keeps that happening as long as there are elements in the array. When overlays[0] does not exist anymore, the mission is completed and code will proceed.<br />
<br />
Applied in the <a href="http://koti.mbnet.fi/ojalesa/boundsbox/rectangle.htm">example</a> of the previous post.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com5tag:blogger.com,1999:blog-3140844186062207174.post-15099775838704295812010-02-08T17:00:00.000-08:002010-02-08T17:00:22.640-08:00Rectangle() and Circle() of V3API v3.28 has new constructors<br />
<br />
<div style="font-family: "Courier New",Courier,monospace;"> new google.maps.Rectangle();</div><div style="font-family: "Courier New",Courier,monospace;"> new google.maps.Circle();</div><br />
Dimensioning and positioning is set by bounds (Rectangle) or by center and radius (Circle). Circle radius is given in meters. Those can be set as options or by special methods setBounds(), setCenter() and setRadius(). They are <a href="http://code.google.com/apis/maps/documentation/v3/reference.html#Rectangle">documented</a> already.<br />
<br />
getBounds() for Circle would be a useful method that is missing.<br />
<br />
Altogether those are very handy classes and we can forget my boundsbox.js library in most cases. Image overlaying is still a perfect task for boundsbox.<br />
<br />
<a href="http://koti.mbnet.fi/ojalesa/boundsbox/rectangle.htm">Quickly testing Rectangle()</a>.<br />
<br />
.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com1tag:blogger.com,1999:blog-3140844186062207174.post-87809062220640679512010-01-22T18:26:00.000-08:002010-01-23T07:10:17.406-08:00Suggesting geocoder [3]From the previous post: "Next logical step of development will be to display all the alternative addresses as a selectable list."<br /><br />While developing, I found this kind of user interface very handy. You can even learn something new while typing. I like it better than classic maps.google.com.<br /><br />Maybe I should give a hint to maps.google.com people:)<br /><br /><a href="http://koti.mbnet.fi/ojalesa/boundsbox/geocode_basic_3.htm">Play with it</a> and comment please.<br /><br /><br /><joke><br />Many geocoders recognize a placename "undefined".Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com2tag:blogger.com,1999:blog-3140844186062207174.post-2269588786961609752010-01-21T12:45:00.000-08:002010-01-21T13:24:48.157-08:00Buttonless geocoder [2]Google's geocoding service is enhanced continuously. It doesn't read your thoughts yet but it is quite forgiving with typos and missing characters.<br /><br />Now you can see the geocoding result after every character you type in the <a href="http://koti.mbnet.fi/ojalesa/boundsbox/geocode_basic_2.htm">new geocoder experiment</a>. When you agree with the result in the display, click outside text field or hit Tab or Enter (not IE) and the map is updated too.<br /><br />So the geocoding request is sent by 'keyup' and map is set by 'change' events of text input field. Clicking on map does not blur the text field and does not trigger 'change'. That is still waiting for a great idea.<br /><br />Some people can type damn fast. Therefore the geocoding requests are limited to maximum three requests per second.<br /><br />The 'hint' display shows the first address of the response set. Next logical step of development will be to display all the alternative addresses as a selectable list.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com0tag:blogger.com,1999:blog-3140844186062207174.post-13609716168316702322010-01-17T06:12:00.000-08:002010-01-17T06:38:28.999-08:00Custom map types in v3The latest version update (3.25) introduced custom map types for api v3. The <a href="http://code.google.com/apis/maps/documentation/v3/overlays.html#CustomMapTypes">interface</a> is nice. If you are familiar with custom tile sets in v2, there are not many new things to learn. There are three types of custom tile based map types.<br /><ul><li>Image map type, like Open Streetmap tiles in the <a href="http://koti.mbnet.fi/ojalesa/v3/osm_dual.htm">example page</a></li><li>Image overlay map type, like the Traffic tiles in the example page</li><li>Non-image tile based map type</li></ul>Image Map Type behaves just like the standard map types. Image Overlay tiles are displayed on top of the Image Map Types. Both of them can be created using ImageMapType class. The difference is how you add the map type to your map. Either to mapTypes registry or to overlayMapTypes MVCArray. Both of them are properties of Map.<br /><br />The non-image map type makes it possible to create tile layers with SVG, canvas or any html elements.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com12tag:blogger.com,1999:blog-3140844186062207174.post-60228035776238383452009-12-08T20:33:00.000-08:002009-12-08T20:48:16.965-08:00Geocoder without Search buttonWe are used to see geocoders with address input field and [Search] button.<br /><br />We can discard the button and use 'onchange' event of the input field instead.<br /><br /><a href="http://koti.mbnet.fi/ojalesa/boundsbox/geocode_basic_plain.htm">It works quite well</a>. Just type in the address and click anywhere on the page. Well not anywhere because click on map is preventDefaulted. Hitting [Enter] key works too. @M$: please don't file a patent application.<br /><br />Text input field can also be used for showing how the geocoder actually understood the address.<br /><br /><a href="http://koti.mbnet.fi/ojalesa/boundsbox/geocode_basic.htm">Full example</a>.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com0tag:blogger.com,1999:blog-3140844186062207174.post-8204354367467390002009-12-07T11:52:00.000-08:002009-12-07T12:40:01.073-08:00Sidebar with makeMarker() v3Wouldn't that be convenient if makeMarker(options) would construct a sidebar entry as well. <a href="http://koti.mbnet.fi/ojalesa/boundsbox/makemarker_sidebar.htm">See it here</a>.<br /><br />A separate SidebarItem() constructor was written. It creates a button element and appends that to a div with id="sidebar" by default. makeMarker() calls the constructor if you have set an option property {sidebarItem: "My label"}<br /><br />The basic button element needs some CSS cure. You can also style individual sidebar items by setting different CSS class names for them. {sidebarItemClassName: "important_item"}<br /><br />The events are set to work bidirectionally.<br /><ul><li>click on sidebar -> click on marker</li><li>select on sidebar -> click on marker (select by [Tab])<br /></li><li>click on marker -> focus on sidebar</li><li>mouseover on sidebar -> mouseover on marker</li><li>mouseout on sidebar -> mouseout on marker</li></ul>One of the reasons why I selected a button element was that it is 'focusable' and 'selectable'. You can open an info window by stepping the focus to a sidebar item by [Tab] or [Shift]+[Tab] and select the item by [Enter] or [Space] (some browsers). That is called accessibility.<br /><br />Also you can use :hover and :focus CSS pseudoselectors. (:focus does not work with IE)<br /><br />SidebarItem() instance has methods addIn() and remove(). We need addIn() to decide where to add the item. That helps to implement the categories.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com12tag:blogger.com,1999:blog-3140844186062207174.post-86484877876804891422009-11-26T03:31:00.000-08:002009-11-26T04:08:43.332-08:00v3 markers and info windowsv3 constructors like Marker(opts) and InfoWindow(opts) take an options object as their single parameter.<br /><br />How about composing a createMarker(opts) function that also takes a single options object and creates both Marker and Infowindow.<br /><br />Marker and InfoWindow options have 'position' and 'zIndex' properties in common. All the other property names are unique.<br /><br />You have to give 'position' for a Marker. Giving the same position to InfoWindow has no effect if InfoWindow.open() is given an anchor.<br /><br />There is no need to set zIndex of InfoWindow if you are using just a single instance of InfoWindow. It even doesn't have any visible effect. So we can freely use zIndex to control the marker.<br /><br />There was no need to convert any property names. makeMarker(opts) function can be seen <a href="http://koti.mbnet.fi/ojalesa/boundsbox/makemarker.htm">in action here</a>.<br /><br />The single options object can further be extended to include new properties like 'category' and 'sidebarLabel'.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com5tag:blogger.com,1999:blog-3140844186062207174.post-21263602910231126262009-10-14T04:05:00.000-07:002009-10-14T04:36:23.076-07:00Custom tooltip for v3v3 BoundsBox library provides constructors to create a rectangular overlay <a href="http://koti.mbnet.fi/ojalesa/boundsbox/v3boundsbox.htm">by LatLngBounds</a> or by LatLng plus <a href="http://koti.mbnet.fi/ojalesa/boundsbox/kmbox.htm">km-dimension</a> (also miles or nautic miles). You can also <a href="http://koti.mbnet.fi/ojalesa/boundsbox/imagebox.htm">overlay images</a> that scale with zoom.<br /><br />It is still missing an overlay with pixel dimensions. For tooltips and other labeling. <a href="http://koti.mbnet.fi/ojalesa/boundsbox/tiptool_trains.htm">It is coming</a>.<br /><br />I haven't included the 'tiptool' to BoundsBox library yet. There are a few things still under development.<br /><br />I am impressed with 'universional' concept of a library that <a href="http://notebook.kulchenko.com/maps/google-maps-using-multiple-api-versions">Paul Kulchenko</a> has implemented. He has written some impressive Canvas experiments that work with v2 and v3 with one and only script.<br /><br />That is the way that Google Maps API libraries should be written.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com1tag:blogger.com,1999:blog-3140844186062207174.post-24727158158116059872009-09-24T07:29:00.000-07:002009-09-25T01:49:36.274-07:00Gecoder response structureI made simple test pages for <a href="http://koti.mbnet.fi/ojalesa/geocode/prettygeocode_v2.htm">version 2</a> and <a href="http://koti.mbnet.fi/ojalesa/geocode/prettygeocode_v3.htm">version 3</a> that display the geocoder response object contents prettyprinted.<br /><br />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().<br /><br />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.<br /><br />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 <a href="http://www.json.org/js.html">json.org</a>.<br /><br />The line breaks, spaces and indents are generated by beautify.js from <a href="http://jsbeautifier.org/">jsbeautifier.org</a>Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com2tag:blogger.com,1999:blog-3140844186062207174.post-78174769030653563452009-09-14T10:57:00.000-07:002009-09-14T11:45:43.297-07:00Zoom eventsThe following concerns version 2 of API.<br /><br />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.<br /><br />'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:<br /><br />- "zi" or "zo" When zoom button is clicked<br />- "zs_drag_zi " or "zs_drag_zo" When zoom slider is moved<br />- "zb_click_zi" or "zb_click_zo" When zoom bar is clicked<br />- "wl_zi" or "wl_zo" By scrollwheel zoom<br />- "key_zi" or "key_zo" When zoomed by keyboard +/-<br /><br />If we have continuousZoom enabled, we get more events: 'zoomstart' and 'zooming'.<br /><br />'zooming' is triggered repeatedly while animated zoom is under progress. The interval is a few tens of milliseconds.<br /><br />'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.<br /><br />I have discovered a third parameter, a boolean that is true only by dblclick-zoom-in?<br /><br />When triggering a continuous zoom, we get a series of events:<br /><ul><li>zoomstart</li><li>zoomto</li><li>zooming</li><li>zooming</li><li>zooming</li><li>zoomend<br /></li></ul>And a lot of data with them.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com1tag:blogger.com,1999:blog-3140844186062207174.post-60011462841235750572009-08-28T18:24:00.000-07:002009-08-29T09:14:59.818-07:00Accessibility and Google MapsMy understanding about accessibility of a web page is, that all its contents must be accessible without a mouse.<br /><br />So was the Map Kitchen examples written. Take <a href="http://mapsapi.googlepages.com/categories.htm">categories example</a> and you can open any info window by [Tab] key, check the checkboxes by [space]. ([Shift[Tab]] to go back).<br /><br />Accessibility is in the hands of the developer who writes the code for a map page. It is not built in Google Maps.<br /><br />Patrick H. Lauke from Opera does not accept my opinion. We had a short public discussion on the forum and our opinions are:<br /><br />Patrick:<br />Google Maps control elements (zoom, nav-buttons...) should be keyboard accessible<br /><br />My opinion:<br />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.<br /><br />Patric has made great work with <a href="http://dev.opera.com/articles/view/keyboard-accessible-google-maps/">a script that converts Google Maps control buttons keyboard accessible</a>Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com1tag:blogger.com,1999:blog-3140844186062207174.post-10548958088803527572009-08-28T17:43:00.000-07:002009-08-28T18:20:47.486-07:00Usability and Google MapsWhat does usability and Google Maps have in common. At least one thing, they are synonyms.<br /><br />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.<br /><br />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.<br /><br />I was very delighted to see that a blog called "<a href="http://www.svennerberg.com/series/google-maps-api-3/">In usability we trust</a>" 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.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com0tag:blogger.com,1999:blog-3140844186062207174.post-87298570536088731412009-08-11T16:10:00.000-07:002009-08-11T17:27:17.256-07:00Images on v3 mapBoundsBox extension was used for drawing rectangles on map a few posts ago.<br /><br />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.<br /><br />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.<br /><br /><a href="http://esa.easypagez.com/v3boundsbox/imagebox.htm">See an example with a table of options and methods</a>.<br /><br /><span style="font-weight: bold;">Update v1.1</span><br /><br /><a href="http://esa.easypagez.com/v3boundsbox/kmbox.htm">The most latest version</a> 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'.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com5tag:blogger.com,1999:blog-3140844186062207174.post-42716312208086436252009-08-11T14:24:00.000-07:002009-08-11T15:08:23.990-07:00Curing IE8 complicationsMany 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.<br /><br />The bug has been archived in IE8 issue list since beta times. The only known workaround is to force IE8 to "IE7 combatibility mode".<br /><br />Investigating Microsofts own code reveals that even they have not found any other workaround. You can find in the head section of Bing maps:<br /><br /><pre id="line1"><<span class="start-tag">meta</span><span class="attribute-name"> http-equiv</span>=<span class="attribute-value">"X-UA-Compatible" </span><span class="attribute-name">content</span>=<span class="attribute-value">"IE=7" </span><span class="error"><span class="attribute-name">/</span></span>><br /></pre><br />And in maps.google.com:<br /><br /><pre id="line1"><span class="doctype"><span id="__firefox-tidy-id"><<span class="start-tag">meta</span><span class="attribute-name"> http-equiv</span>=<span class="attribute-value">X-UA-Compatible </span><span class="attribute-name">content</span>=<span class="attribute-value">IE=EmulateIE7 </span><span class="error"><span class="attribute-name">/</span></span>></span></span></pre><br />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 <a href="http://hsivonen.iki.fi/doctype/">this excellent study</a>. What I learned about that article, is that the tag will not pass HTML5 validation.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com4tag:blogger.com,1999:blog-3140844186062207174.post-9080237599906935212009-07-22T07:55:00.000-07:002009-08-23T11:34:21.086-07:00Custom marker generators<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbQl0OKam-1MaM-RC8ypM8x4y-XtzNtKCl_WQbcktuJChN3DuxviJg-vFiMo8lCWa3-dOVflbFo-00E5MDIZ867g6lE4FOtSIzwoTw3xzP36xeBxjr-XIgLJXVrUUgHWAzI0TYCzEkV0/s1600-h/chart.png"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 21px; height: 34px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGbQl0OKam-1MaM-RC8ypM8x4y-XtzNtKCl_WQbcktuJChN3DuxviJg-vFiMo8lCWa3-dOVflbFo-00E5MDIZ867g6lE4FOtSIzwoTw3xzP36xeBxjr-XIgLJXVrUUgHWAzI0TYCzEkV0/s320/chart.png" alt="" id="BLOGGER_PHOTO_ID_5373228801600904594" border="0" /></a>There are some fancy free services that generate custom marker icons for us. Google Chart API provides many useful <a href="http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins">labeled map pin types</a>. Even tilted ones.<br /><br />Graham has released a <a href="http://www.powerhut.co.uk/googlemaps/custom_markers.php">fascinating service</a> that generates all the needed files from an image file of your own. You upload the image as png, gif or jpeg and instantly you can download a zipped package containing:<br /><ul><li>24-bit png icon image</li><li>shadow</li><li>printImage</li><li>mozPrintImage</li><li>printShadow</li><li>transparent<br /></li><li>imageMap array</li></ul>Wou!Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com3tag:blogger.com,1999:blog-3140844186062207174.post-86967284989154689322009-07-20T11:37:00.000-07:002009-07-20T14:06:49.408-07:00Drawing rectangles with V3The experimental <a href="http://code.google.com/apis/maps/documentation/v3/">API v3</a> does not support polylines yet. We don't need polyline support for drawing simple rectangles. We can make browser to draw them.<br /><br />BoundsBox for v3 is an extension that takes LatLngBounds object as an argument and draws the bounds on map. A DIV is created and made an OverlayView overlay object.<br /><br />Styling of the rectangle is made with CSS. You can put text content also and even a background image. 'click' event is available, 'mouseover' is easily attached.<br /><br /><a href="http://esa.easypagez.com/v3boundsbox/">See the example</a> that visualizes bounds that v3 geocoder returns.Esahttp://www.blogger.com/profile/16422122370460025388noreply@blogger.com6