Images on v3 map

BoundsBox extension was used for drawing rectangles on map a few posts ago.

The new version of BoundsBox (1.0) has option to insert images inside (visible or invisible) rectangles. The image is attached in a draggable pane of map. So it pans with map. It scales when map is zoomed. It is attached below markers, so it doesn't eat marker clicks. The behavior is equal to GGroundOverlay of v2 api.

A few more options and methods were introduced with the new version. They mainly serve image handling like opacity and z-index. Events 'imageloaded' and 'imageloaderror' are also provided.

See an example with a table of options and methods.

Update v1.1

The most latest version provides also an alternative constructor KmBox(). Instead of LatLngBounds it takes LatLng and kmX, kmY dimensions as its parameters. As a side product we got LatLng.destinationLatLng(bearing, distance) method. That calculates LatLng 'that many kilometers from this LatLng to that compass bearing'.

Curing IE8 complications

Many map pages work fine with all the other browsers but not IE8. Clicks seem to take place far away from the point that user actually clicked.

The bug has been archived in IE8 issue list since beta times. The only known workaround is to force IE8 to "IE7 combatibility mode".

Investigating Microsofts own code reveals that even they have not found any other workaround. You can find in the head section of Bing maps:

<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

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

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

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

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.