GoogleBar hack

How to make a Local search and have an info window opened during page load.

If you load the full blown Google AJAX Search API, that's not a problem. If you are using Local Search GControl, you have a searchFormHint option but not a method to trigger the search. With GGoogleBar you don't have either of them.

Both GoogleBar and Local Search Control generate a form element with a text input field and a submit button. The form element of GoogleBar is not generated until the GoogleBar is opened. So we can assume that the form is the last one on your page and we can access it like:

  var lastForm = document.forms.length - 1;
  document.forms[lastForm].elements[0].value = "Music";
  document.forms[lastForm].elements[1].click();

You have to define the GoogleBar to open initially by googleBarOptions:{showOnLoad:true}.

How to trigger the form access? There is no event that would tell us when the form is built. I ended up using onIdleCallback function plus a small timeOut. The onIdleCallback  is triggered when GoogleBar is formed. It is triggered also after each search so I set a variable to make sure the seach is made only once.

It seems to work but with no quarantee.

softstateurlhook

Just noticed an intresting GMap2 event 'softstateurlhook'. I did not find it mentioned on web. 

It is triggered when map state changes.  After panning , zooming or map type change and also on page load. Try it. It returns an object as its single parameter. The properties of the object:

• ll: "60.170293,24.939554"
• spn: "0.043719,0.087891"
• z: 13
• t: "k"

They are lat/lng, span, zoom and map type. They are maps.google.com url parameters. If you click 'Powered by Google' logo link, those parameters are used to form the url.

You can use those for similar linking purpose, or you could store those in a cookie. A back button could also be constructed using the event.

The event is most convenient for fetching marker data from a server. Center lat/lng and span are just the parameters needed and the event is triggered just when needed.

Map Kitchen [part 5] ZMarker

GMarker is quite a complicated object. That is why a few hundread markers are too heavy a load for poor browsers. Loading even more features on GMarker doesn't sound sensible. Well, there is some sense if the new features enhance the UI so that user doesn't have too zoom in/out that often.

Z-index switching is a way to make each marker reachable on a crowded map. It is one of the simpliest solutions to the eternal markers-too-close-together problem. The marker that is clicked and the info window was read, is thrown behind the others.

The technique was first published in Dec 2006. The code of the original test page was once again so messy that not very many people have applied the idea. Now it is written as a simple to use GMap2 method createZMarker(). We need to know the status of infowindow, that is why it is a GMap2 method.

I haven't been promoting the technique very actively because it was based on an undocumented option of GMarker. The ZIndexProcess option has been documented for a few months now but still the documentation doesn't  tell the full truth. The ZIndexProcess function is documented to be called when marker is addOverlayed and when marker's infowindow is opened. Yes, that happens but the function is called also when the infowindow is closed. That is the most valuable feature but still undocumented and maybe a bug.

Whether the infowindow is opening or closing is determined by status of GMap2.getInfoWindow().isHidden(). If the timing of that flag changes, the z-index swap starts behaving wrong way. Live page using this method should be locked to a certain api version and tested with new version always before updating. That is actually a good practice anyway.

There have been some discussion about new documented way to control z-index. If we get it, we could control z-index also by mouseover. Go and star the request if you find it useful.

Marker icon color change is independent of z-index process but it is built in createZMarker(). I find it an important feature for the journey towards better UI. It makes co-operation between sidebar and markers more efficient.

The marker icons are created by Google Charts API using MapIconMaker script. The markers are slightly transparent which looks good but harms color contrast in very crowded places.

Map Kitchen [part 4]

Sidebar of maps.google.com can be collapsed to get full map view. The way it works is impressive. The map stays static when it is widened and its actual centerpoint changes. User doesn't see the tiles loading, they are loaded already.

A few people have been asking how to make something similar. The secret of the implementation seems to be solved. The map is fullscreen all the time. Only the sidebar is swithed on and off over the map.

Copying the idea is not very simple. There are many tricky details to be solved. Most of them are solved now. See the page. 

The base and basic components for better map pages are about constructed. A page that imports and parses its data from text files, puts it on map and in collapsible interactive sidebar with category switching.

Now we can concentrate more at filtering the data and fine tuning the actual map UI.

Drag & drop sortable list

Today we have something more fascinating than a regular part of Map Kitchen series. We have a sortable list with GDraggableObject(). v0.1.

Map Kitchen [part 3]

Marker categories is the basic trick of filtering markers. Groups of markers can be switched on and off and the groups have different icons. The classic switching by sidebar checkboxes was chosen.

Shall we load each category from a file of its own or shall we have a single file with category data. We shall provide both ways. The concepts can even be mixed.

First we create a SideBar() object, then we create the needed BarCategory() objects. A category will be created if it is specified in file loading options. Also one is created if a new category name is found from files category cell.

The category checkbox switches display of category entries and its markers. Also visibility of marker image on sidebar is switched making sidebar cleaner.

See the page, play with it and see its source.

Map Kitchen [part 2]

A map page reading marker and infowindow data from a text file. It comes equipped with a 2-way interactive sidebar. That that fulfills many basic needs.

If you have a single file with not very many markers and they do not overlap, you don't need the upcoming parts of this series. Just copy the code and display your file. You can make the infowindow and sidebar look good by css.

Sidebar label and marker tooltips title are the same as infowindow header. The data cell of them is still hardcoded [2] but it is easy to find in the source code and can be changed independently to any cell in your csv line.

I suddenly noticed that [part 1] did not parse the text file with IE7. It is fixed now and it was just introducing the parseCsv() too late in the code for IE. Risk of that kind of troubles is avoided when I package the methods as a library. There are methods coming before that.

Too many markers is the most common UI issue on map pages. The following parts will show methods for filtering the markers.