Suggesting geocoder [3]

From the previous post: "Next logical step of development will be to display all the alternative addresses as a selectable list."

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.

Maybe I should give a hint to maps.google.com people:)

Play with it and comment please.


<joke>
Many geocoders recognize a placename "undefined".

Buttonless 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.

Now you can see the geocoding result after every character you type in the new geocoder experiment. 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.

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.

Some people can type damn fast. Therefore the geocoding requests are limited to maximum three requests per second.

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.

Custom map types in v3

The latest version update (3.25) introduced custom map types for api v3. The interface 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.

• Image map type, like Open Streetmap tiles in the example page
• Image overlay map type, like the Traffic tiles in the example page
• Non-image tile based map type

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.

The non-image map type makes it possible to create tile layers with SVG, canvas or any html elements.

Geocoder without Search button

We are used to see geocoders with address input field and [Search] button.

We can discard the button and use 'onchange' event of the input field instead.

It works quite well. 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.

Text input field can also be used for showing how the geocoder actually understood the address.

Full example.

Sidebar with makeMarker() v3

Wouldn't that be convenient if makeMarker(options) would construct a sidebar entry as well. See it here.

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"}

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"}

The events are set to work bidirectionally.

• click on sidebar -> click on marker
• select on sidebar -> click on marker (select by [Tab])
  
• click on marker -> focus on sidebar
• mouseover on sidebar -> mouseover on marker
• mouseout on sidebar -> mouseout on marker

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.

Also you can use :hover and :focus CSS pseudoselectors. (:focus does not work with IE)

SidebarItem() instance has methods addIn() and remove(). We need addIn() to decide where to add the item. That helps to implement the categories.

v3 markers and info windows

v3 constructors like Marker(opts) and InfoWindow(opts) take an options object as their single parameter.

How about composing a createMarker(opts) function that also takes a single options object and creates both Marker and Infowindow.

Marker and InfoWindow options have 'position' and 'zIndex' properties in common. All the other property names are unique.

You have to give 'position' for a Marker. Giving the same position to InfoWindow has no effect if InfoWindow.open() is given an anchor.

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.

There was no need to convert any property names. makeMarker(opts) function can be seen in action here.

The single options object can further be extended to include new properties like 'category' and 'sidebarLabel'.

Custom tooltip for v3

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.