Google Maps API tricks

Zoom tooltip hack

2011-05-08T18:06:00.000-07:00

Average users don't care about zoom level numbers, but some people do. Developers do.

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.

Try hovering zoom slider of the first quadtree example page. Yes, hovering the zoom slider will display also meters/px resolution. That is an extra bonus for those who are interested in the World.

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.

Distance Matrix

2011-05-05T18:27:00.000-07:00

Distance Matrix service was introduced in the latest update of v3 API. It returns maximum 100 driving distances and durations by a single request. Reference.

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.

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.

It has travelMode option too. So it can be used for walking distances in city maps.

This is a useful service.

Quadtree

2011-04-28T18:32:00.000-07:00

Quadtree is a powerful spatial indexing technique. Wikipedia.

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 quadtree demo page online. Play with it. It's inspiring.

If you are interested in experimenting, I enclosed the basic functions in QT.js library. The collision detector will be there too but I have some different applications in mind first.

Category sidebar - there is no sense without priority

2011-03-14T13:45:00.000-07:00

Thanks 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?

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.

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!)

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.

The smallest mobile screen can display a sidebar with a few (<10) entries. You have to decide, which of those 1000 they are.

Ideas?

v3 Marker z-index, the way I thought it was

2010-12-10T18:12:00.000-08:00

The way it is

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?

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.

The way it might be

User z-index and actual DOM z-index should be separated.

Markers should have the default DOM z-index as it is now.

Marker.getZindex() should return zero if you did not set any z-index.

Setting a z-index value would be added to the default value.

So user z-index would be relative to the actual DOM value.

API would take care of order by latitude (of overlays with equal z-index) like it currently does without any z-index settings.

Why

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

I have a feeling that it was originally meant to work that way.

Automatic API v3 reference

2010-10-16T11:16:00.000-07:00

I 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. Frozen (3.0), Release (3.1) and Nightly (3.2).

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.

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.

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.

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.

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.

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.

You can use the pages for comparing versions. Yes, they are documented separately but still you can find something meaningful.

Circle in v3

2010-04-27T17:43:00.000-07:00

Circle object of v3 creates a circular overlay as expected. It is more useful than I first thought.

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. An example.

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 updated version of makeMarker(). It creates a Circle instead of Marker if you set any value to 'radius' option.

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

Custom icons

2010-02-21T20:13:00.000-08:00

Just discovered a custom icon collection project on Google Code. There are more than 900 icons this far.

It would be nice if those were provided in sprite format. Happily there are sprite-making services. SpriteMe is the most advanced of those.

.

clearOverlays() in V3

2010-02-08T17:23:00.000-08:00

There is no clearOverlays() in API v3. Some practices have been presented. I think this is the simpliest so far.

Push all the overlays in an array when created (as usual). Following code will clear both map and the array:

  while(overlays[0]){

   overlays.pop().setMap(null);

}

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.

Applied in the example of the previous post.

Rectangle() and Circle() of V3

2010-02-08T17:00:00.000-08:00

API v3.28 has new constructors

  new google.maps.Rectangle();

  new google.maps.Circle();

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 documented already.

getBounds() for Circle would be a useful method that is missing.

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.

Quickly testing Rectangle().

.

Suggesting geocoder [3]

2010-01-22T18:26:00.000-08:00

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]

2010-01-21T12:45:00.000-08:00

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

2010-01-17T06:12:00.000-08:00

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

2009-12-08T20:33:00.000-08:00

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

2009-12-07T11:52:00.000-08:00

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

2009-11-26T03:31:00.000-08:00

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

2009-10-14T04:05:00.000-07:00

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.

Gecoder response structure

2009-09-24T07:29:00.000-07:00

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

Zoom events

2009-09-14T10:57:00.000-07:00

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:

zoomstart
zoomto
zooming
zooming
zooming
zoomend

And a lot of data with them.

Accessibility and Google Maps

2009-08-28T18:24:00.000-07:00

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

Usability and Google Maps

2009-08-28T17:43:00.000-07:00

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.

Images on v3 map

2009-08-11T16:10:00.000-07:00

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

Curing IE8 complications

2009-08-11T14:24:00.000-07:00

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:

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

Custom marker generators

2009-07-22T07:55:00.000-07:00

There are some fancy free services that generate custom marker icons for us. Google Chart API provides many useful labeled map pin types. Even tilted ones.

Graham has released a fascinating service 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:

24-bit png icon image
shadow
printImage
mozPrintImage
printShadow
transparent
imageMap array

Wou!

Drawing rectangles with V3

2009-07-20T11:37:00.000-07:00

The experimental API v3 does not support polylines yet. We don't need polyline support for drawing simple rectangles. We can make browser to draw them.

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.

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.

See the example that visualizes bounds that v3 geocoder returns.

Location by browser

2009-07-13T16:19:00.000-07:00

Now we have two browsers that provide client location by JavaScript API, Firefox 3.5 and Google Chrome.

FF3.5 supports W3C specification (draft) and provides navigator.geolocation object. The objects getCurrentPosition() method returns coordinates and even heading and speed properties.

Chrome provides geolocation object by built in Google Gears.

Actually other browsers return the location too with Google Gears installed.

Test and read more from the links of this page. The page is the first one that I set sensor=true.

GoogleBar hack

2008-12-13T10:17:00.000-08:00

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

2008-12-02T10:39:00.000-08:00

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

2008-11-29T04:55:00.000-08:00

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]

2008-11-23T03:11:00.000-08:00

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

2008-11-13T08:39:00.000-08:00

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]

2008-11-10T14:00:00.000-08:00

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]

2008-11-06T11:19:00.000-08:00

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.

Map Kitchen [part 1]

2008-11-02T11:52:00.000-08:00

What is Map Kitchen? It is a series of experimental pages. Also it is a JavaScript library that will contain the functions and methods used on those pages.

Where does the name come from? We have a great FM-station in Helsinki playing experimental music. One of their best DJ's took a name 'Soul Kitchen' for his program (he is a cook). So this is thanks to DJ Soppamies for inspiring me by music.

Where does the idea come from? Many people been asking me help for applying code ideas presented in

marker data from a text file
sorting by nearest location
switching z-index of a marker
two-way interactive sidebar

I was exploring source codes of those pages and I did not understand much. No wonder that people been asking for my help. So I decided to start from scratch.

The series will use CSV text files as the data source because it been asked a lot. Still you can use any source:

inline hardcoded
XML/KML
JSON
feeds
Spreadsheets API
TSV

I been trying to write all the functions and methods to be programming modules for any kind of data source processing.

I already blogged a few methods how to generate CSV-formatted text files. Many of you have those files already from various sources.

When does it start? Just now, we start putting the CSV-data on maps. The first part is very simple: polyline from CSV.

Geocoding by Google Spreadsheets

2008-10-31T14:05:00.000-07:00

Tony Hirst published a highly inspiring article about doing a Google Maps mashup without JavaScript.

I would like to show that Google Spreadsheets can do geocoding as well as Pipes.

There is http-version of Google Maps geocoder. Send a request:

http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=xml

and you get a full-blown XML response. With parameter output=csv you get a simplified response

200,6,42.730070,-73.690570 Status, accuracy, lat, lng, as a four cell csv text response, yahoo!

Google Spreadsheets can import csv-data by =ImportData()formula. So why don't we make it fetch coordinates of the address in the next cell.

The order of the parameters is not convenient for us, so we change it. The query-parameter 'q' shall be the last one. We type in the first cell of Spreadsheets:

http://maps.google.com/maps/geo?output=csv&q=

In the next cell we type the requested address like Helsinki.

The third cell will add together the two previous cells and ask for data by ImportData() formula:

=ImportData(CONCATENATE(A2,B2))

When you finished typing that, you will see a miracle in the next cells: '200' (http status), '4' (Google accuracy parameter), 60.169879 (latitude of Helsinki) and 24.938408(longitude of Helsinki). Did we ask anything more?

And they say that there is no geocoding in Google Spreadsheets. Plus think how it can import and export. Hold my hat!

There is also automatic googling to get input data.

=GoogleLookup(entity,attribute)

can fetch your POI (entity) address(attribute), and you geocode that as above.

You can use the output via a variety of feeds or read it by ajax-api as JSON. You can for instance preload your pages GClientGeocoder cache to know the POIs. Your visitors don't find the POI by geocoding unless you took care of it.

A test spreadsheet and its csv-feed.

What happens when all the pages read each other in a loop.

Batch geocoder with CSV output

2008-10-30T18:11:00.000-07:00

Geocoding a list of addresses as a batch can be done faster than some times ago. Still you cannot send a bunch of geocode requests by GClientGeocoder at one moment. They must be done one by one. Just wait that the former request is answered before you send a new one.

This is a batch geocoder page that takes a line feed separated list of addresses. Many address lists don't contain country or state names if they are constant. There are even lists without town mentioned. Those missing constant names can be added in the [extension] field of the page.

Paste your address list and hit [geocode]. The geocoded coordinates will be listed on output field and corresponding markers are placed on map. Non-found addresses will be listed on error report field.

Reverse GClientGeocoder

2008-10-23T07:53:00.000-07:00

Pamela announced a few hours ago that the much requested feature is here. Great. I made a random click on the example page and saved the server response.


_xdc_._1fmnhtk4s && _xdc_._1fmnhtk4s({
"name":"-122.124367,37.436975",
"Status":{
 "code":200,
 "request":"geocode"
},
"Placemark":[{
 "id":"p1",
 "address":"870 Bruce Dr, Palo Alto, CA 94303, USA",
 "AddressDetails":{
   "Country":{
     "CountryNameCode":"US",
     "CountryName":"USA",
     "AdministrativeArea":{
       "AdministrativeAreaName":"CA",
       "Locality":{
         "LocalityName":"Palo Alto",
         "Thoroughfare":{
           "ThoroughfareName":"870 Bruce Dr"
         },
         "PostalCode":{
           "PostalCodeNumber":"94303"
         }
       }
     }
   },
   "Accuracy": 8
 },
 "Point":{
   "coordinates":[-122.124557,37.437032,0]
 }
}]
})

I don't know who's address that is but you can see the structure.

The query is given conveniently as a GLatLng() to the GClientGeocoder.getLocations() as you can see in the updated documentation.

So the client side script makes the decision wheter we send geocode or reverse-geocode request. That is clever.

The new feature is a perfect building brick for my next csv generator page. I was just intending to publish the page!

See a temporary test page.

GDraggableObject

2008-10-22T10:38:00.000-07:00

I had to update the contex menu of the editor of previous post. The idea of using infowindow as a context menu was bad. It covers the map and the area of interest is just beneath the infowindow.

I wrote a function that creates a popup block with hide() and show() methods. The block is made a GDraggableObject so that it will no more be on your way.

There has been a trouble with text input fields in a GDraggableObject. No matter how hard you try to click it, the cursor doesn't stay in the field and you cannot enter anything. Suddenly the solution was found.

TIP! Add to the properties of the text input:
onmouseover="this.focus()";

Driving directions were also added to the editor.

A few hours later:

Drop down selector is another problematic element on draggable block. The block gets dragged unintentionally when the scrollbar is dragged. Actually all the elements with scrollbars do the same.

Fortunately GDraggableObject has some handy methods. disable() freezes the block and enable() makes it draggable again. The scrollbar problem was solved by disabling draggability on selector mouseover.

TIP! Add to the properties of a draggable selector:
onmouseover = draggableObject.disable();

onmouseout = draggableObject.enable();

After a few hours of sleep:

I noticed that Chrome doesn't build the selector options dynamically in the way I been using for a long time.

selector.options[index] = new Option(value);

Chromes dom inspector shows the generated options but they are not rendered! So the trouble is in Chrome. Lets go on.

Polyline editor, csv output

2008-10-21T04:19:00.000-07:00

A polyline editor is the first page that uses the CSV parser of the last post. At least I have not heard of any other.

The online editor uses the GPolyline.enableDrawing() method that came with api v2.111. The behaviour is similar to MyMaps. The line data is printed on a textarea in CSV format.

The csv parser is used for redrawing the polyline from generated code. You can come back with your csv file and go on editing. That is a client side application aka web page. So you have to copy/paste the cvs text to your own text editor and save it.

Why csv? The reasons are still the same as they were in 1967. It is still the interchange format with widest support. Also people are asking for it. It is the easiest to understand and edit. You can use it with any character set. A syntax error will not corrupt the whole file. The list goes on..

There is no csv standard. The concept is so simple that there was never a need for a written standard. Instead there is an informational RCF document 4108 from 2005!

The data validation I am using at the moment is super simple. If either of the excpected coordinate cells includes NaN data, the whole line is skipped. You don't even need a separate empty line skipping. I have not managed to write a bad line that would confuse the other lines.

The current parser is even slightly simplier than the one in previous post. I will not update the previous post. See the source of the editor page.

A series of csv based pages follows.

CSV parser

2008-10-18T10:31:00.000-07:00

Comma separated text file CSV is a lightweight alternative to XML/KML and JSON. It is extremely simple to create and maintain by a text editor. All the spreadheets and databases can export CSV.

GPS POI files are widely available around the web in CSV format. No wonder that many people are trying to display those files on Google Maps. The code of my old page is so messy that not many people have managed to use it as a template. I am just finishing a cleaner page but actually the CSV parsing was one the main troubles.

Basic CSV is extremely simple to parse. Split the file into lines by split("\n") and split the lines by split(","). That's it, BUT. In real CSV the strings (that are separated by commas) may also contain commas if the string is quoted by double quotes. How not to split those quoted strings?

Four hours of googling and 100+ articles, discussions and snippets didn't bring a script but an idea how to do it.

First split the line by quote. Then find the odd-indexed splits by if(i%2) and replace its commas temporarily with something like "::::". Do the usual splitting by comma and after that replace the original commas back.

Four hours googling plus one hour of code writing and testing gave results. A CSV parser that seems to work perfect.

/**

* parseCsv()

* @return an array of GLatLng() objects

* @author Esa 2008

String.prototype.parseCsv = function(opt_options){

var results = [];

var opts = opt_options||{};

var iLat = opts.lat||1;

var iLng = opts.lng||0;

var lines = this.split("\n");

for (var i=0; i

var blocks = lines[i].split('"');

//finding commas inside quotes. Replace them with '::::'

for(var j=0;j

if(j%2){

blocks[j]=blocks[j].replace(/,/g,'::::');

}

} //@author Esa 2008, keep this note.

lines[i] = blocks.join("");

var lineArray = lines[i].split(",");

//skip empty lines

if(lineArray.length>1){

var lat = lineArray[iLat]*1;

var lng = lineArray[iLng]*1;

var point = new GLatLng(lat,lng);

//after splitting with commas, we put hidden ones back

for(var cell in lineArray){

lineArray[cell] = lineArray[cell].replace(/::::/g,',');

}

point.textArray = lineArray;

results.push(point);

}

return results;

}

Note that the array of a line cells is attached as .textArray property to the GLatLng() object.

Sprites

2008-10-06T15:35:00.000-07:00

GIcon() property .sprite was discovered in the api code two months ago but no-one has presented any use for that. It is an object with two properties .image and .top.

sprite.image is uri of an image and sprite.top sets its style.top relative to the marker container.

You can have a set of markers in a single image file and bring one icon at a time visible by .top.

Hosting a large set of markers is not fun. A single file will do now. Also you don't have to preload separate image files anymore.

See a demo.

Update:

There are also 'width' and 'height' properties. Those can be used if you did not specify GIcon.size. You can have different sized icon images in a single sprite. Thanks Mike.

zmarker.js library

2008-04-04T10:39:00.000-07:00

It is simple to write a test page using a new functionality that was announced or was discovered by Mike Williams. I been doing that many times within a few hours from the publishing of a new feature.

Sometimes you just got an idea and write a page for study and publish it. People mail you positive feedback. It is rewarding, useful and fun.

Writing an api extension is totally different. You have to think about all the developers that are going to use your code. You have to write functions that have useful and useable I/O. You have to write clear code with descriptive variable and function names. You have to comment your code clearly. You have to follow general code writing conventions. You have to follow general comment tagging conventions. You have to write a reference. You have to write useful example pages. You have to make a page that describes the extension. You have to monitor and react feedback on group. Still you will get a lot of personal email.

Writing a library of api extensions sounds like something that is not intended for any intelligent creature.

I took the challenge. zmarker.js library will be announced in a few days.

Writing an API is like something from Moon or Mars compared to my 'library'. Now I do respect the Google maps api people even more than ever before. They are doing some unbelievable work.

P.S. From the beginning of the api group: Many of the first posters were disturbed that the marker is ugly. How did they find the right group without a vision.

Languages

2007-11-02T17:57:00.000-07:00

Languages available with &hl=en like parameter in api js call.

Croatian hr
Czech cs
Danish da
Dutch nl
English en
Finnish fi
French fr
German de
Greek el
Hindi hi
Indonesian id
Italian it
Japanese ja
Norwegian no
Portuguese pt
Raeto-Romance rm
Russian ru
Serbian sr
Slovak sk
Slovenian sl
Spanish es
Swedish sv
Thai th
Turkish tr
Ukrainian uk
Vietnamese vi

Update Oct 2008:

The up-to-date list of supported languages is online in a sophisticated format.

api.js version display

2007-06-30T06:06:00.001-07:00

Add a line:

document.write(_mJavascriptVersion);

Update Oct 2008:That variable told you the latest version available. No we have a variable that tells you the actual version you are using:

G_API_VERSION

String to a GLatLng() object

2007-05-17T01:48:00.000-07:00

Now we have a handy undocumented method
.fromUrlValue();

It converts a coordinate pair string like "60.21, 24.95" to a GLatLng object:

var latLngString = "60.21, 24.95"
var point = GLatLng.fromUrlValue(latLngString);

Nice. The method performs split(",") and parseFloat() for you. It simplifies parsing of many file formats. Actually I am converting my Spreadsheets to have a 'latlng' column instead of 'lat' and 'lng' columns. It makes copy-paste-filling of the spreadsheet easier.

Get coordinates simply

2007-02-07T09:38:00.000-08:00

On maps.google.com, type in url-field:

javascript:void(prompt('lat, lng', gApplication.getMap().getCenter()));

Not very convenient but make it a bookmark! Get maps.google coords. Drag it into your bookmarks folder.

Business graphics

2007-01-26T11:32:00.000-08:00

I see a lot of sense to make presentation graphigs by GPolygon. Graphics are the the easy part, legends cause some pain.

Do it. Dynamic diagrams and pies. Easy as a lie.

My project just now is a pie called 'clock'.

Large Zoom Control Without Pan Buttons

2007-01-04T11:39:00.000-08:00

A duplicate of my post on api forum:

You can move the large control upwards:
map.addControl(new GLargeMapControl(),
new GControlPosition(G_ANCHOR_TOP_LEFT,
new GSize(5,-60)));

Having a style definition 'overflow:hidden' for the map div hides the
overflowing pan buttons.

A demo.

There is also a clever commenting script called 'JS-Kit' on the demo page. That is loaded by GScript() just for testing. Try commenting or just sending regards.

ZMarker

2006-12-27T12:08:00.000-08:00

My solution to 'markers too close together' is via manipulating z-index of the markers. The possibility was given to us with 2.70.

A test page with some more explanation.

Finding map buttons

2006-12-04T14:31:00.000-08:00

The string variables listed earlier can be used to identify map buttons.

var divs = map.getContainer().getElementsByTagName("div");
for(var i = 0; i<divs.length; i++)
{
var title = divs[i].getAttribute("title");

if(title==_mZoomIn)
{
zoomInButton=divs[i];
}}

Now variable 'zoomInButton' is the container of 'Zoom In' button and you can change its style or construct an event listener.

Update 2008. Excpected lifespan of this kind of hacks is a few months. This hasn't been working for a long time. if(title=="Zoom in") works but but you have to lock the language to hl=en.

GPolygon()

2006-11-21T15:43:00.000-08:00

v2.69 gives us possibility to fill inner area of a polyline. The syntax is like GPolyline() but with two more parameters:

new GPolygon(array_of_points, line_color, line_width, line_opacity,
fill_color, fill_opacity);

Discovered by Mike Williams. An example.

A page without a key

2006-11-12T10:28:00.000-08:00

Api checks

if((d=="igoogle"||d=="gmodules"||d=="googlepages"||
d=="orkut")&&c=="com")

from the page url. If satisfied no key is needed. The bonus is that you get the same tileset as maps.google.com.

If you have your page hosted in GooglePages without a key you get Navteq maps for US and today you can get African maps with the trick. Just delete '&key=blahblah..' from the api call script. 'Powered by Google' logo goes with the key. Cairo.

I have not solved how to make GClientGeocoder work with a page like that.

Event tester 2.0 pre alpha

2006-11-03T23:45:00.000-08:00

Now I have a partially operating pre alpha event test page v2.0 on line:

parameters (first three of them)
draggable output fields
more objects (info window, overview map, draggable object...)
the list of GEvents is read from text file that is a section of api
events are alphabetically sorted to a "List" field
events field is editable [submit]
call GLog to see timing
script area (also in v1) to write event listeners of your own
a bug was revealed:
mouseover and mouseout of map will not come back if once deleted
'mousemove' is deleted for saving output field
I have managed to get a few times

Does not work with IE at this time but I quess that is not a problem. Please comment especially about 'zoomrangechange' and 'blur'.

'load' GEvent of overview map

2006-10-30T16:37:00.000-08:00

Oh yes. I took time to enhance the event test page. I will publish 2.0 beta very soon. During testing I made some discovery.

It has been a common practice to apply a small delay when setting the initial map type or position of overview map.

I happened to find a GEvent 'load' that is probably intended for the purpose.


var ovMap=new GOverviewMapControl();
map.addControl(ovMap);
var mini=map.getOverviewMap();

GEvent.addListener(mini,"load",function(){
mini.setZoom(14);
mini.setMapType(G_SATELLITE_MAP);
});

Seems to work perfect.

GEvents

2006-10-28T11:44:00.000-07:00

There is an easy to read section in api.js. The one where string variables are introduced (2.67):

var Bb="newcopyright";
var mf="blur";
var X="click",
bd="contextmenu",
Ca="dblclick";
var nf="error";
var ce="keydown",
de="keypress",
of="keyup",
cd="load",
Da="mousedown",
xc="mousemove",
Ea="mouseout",
Ma="mouseup",
he="mousewheel",
ie="DOMMouseScroll";
var sf="unload",
yc="remove",
Va="mouseover",
Yd="closeclick",
fe="maximizeclick",
ke="restoreclick",
ge="maximizeend",
rf="restoreend",
pf="maxtab",
Wd="animate",
Vd="addmaptype",
lf="addoverlay",
Xd="clearoverlays",
Zd="infowindowbeforeclose",
be="infowindowprepareopen",
$d="infowindowclose",
ae="infowindowopen",
Kb="maptypechanged",
qa="moveend",
Lb="movestart",
je="removemaptype",
qf="removeoverlay",
Wa="resize",
tf="zoom",
dd="zoomend",
le="zooming",
me="zoomrangechange",
ne="zoomstart",
ub="dragstart",
tb="drag",
Ua="dragend",
vb="move",
wc="clearlisteners";
var vc="changed";
var ee="logclick";

Most of them are known GEvents but there are a few strings that I have no idea about. They are not necessarily GEvents but it is very easy to try that. I have to find time to create the event test pages further on. For instance info window has GEvents now.

More custom legends

2006-10-17T14:27:00.000-07:00

Tooltips of map type buttons are here again. We had them in v1 and now in v2,65. When trying to find how to modify their contents I found many other parameters too.

_mPanNorth, _mPanWest, _mPanEast, _mPanSouth (Arrow button tooltips)
_mLastResult (Return button tooltip)
_mZoomIn, _mZoomOut (Zoom button tooltips)
_mMapMode (Map button legend)
_mMapModeShort (Map legend of small button)
_mStreetMapAlt (Map button tooltip)
_mMapError (Error message of uncovered areas)
_mSatelliteMode (Sat button legend)
_mSatelliteModeShort (Sat legend of small button)
_mSatelliteMapAlt (Sat button tooltip)
_mSatelliteError (Error message of uncovered areas)
_mHybridMode (Hyb button legend)
_mHybridModeShort (Hyb legend of small button)
_mHybridMapAlt (Hyb button tooltip)

Syntax as in previous post.

Update 2008. These variables have gone a long time ago.

Custom type button legends

2006-10-15T12:35:00.001-07:00

Add this script right after your Maps API call:
<script>
_mMapMode = "Karta";
_mMapModeShort = "Karta";
_mSatelliteMode = "Sputnik";
_mSatelliteModeShort = "Sput";
_mHybridMode = "Gibrid";
_mHybridModeShort = "Gib";
GLoadMapsScript();
<\script>

An example.

The trick was presented by Alexander on the forum.

var blog = new collectionOfTricks();

2006-10-15T11:41:00.000-07:00

A blog is the most convenient notebook. This is my notebook for Google Maps API code snippets and tricks.

The first one is a method to edit the legends of map type buttons.