О немО себе[code]/maps/

Mission:Start map

Goal:Reduce fails

Step1. Test yourself

In the beggining - test your own map application.
Do this in two steps:
Impliment some king of "loading guard", it will fires if map wont start in 40 seconds

    somehow test what map is ready and workable.
    for example - map will fires event "weAreDone".
    catch it!
 /* i thing 40sec is alot of time*/
and then define global error catcher

function global_error_catcher(msg, url, num, more){
    if(msg && msg.name){
        var _event=msg;
        msg=(_event.name+"] "+e.fileName+":"+e.lineNumber+"\n"+e+"\n"+e.stack);
     var evt=msg;
     for(i in evt)msg+=i+":"+evt[i]+"\n";
    var textout=("global error:\n"+msg+",\n"+url+":"+num+"\n:"+more);
    new Ajax.Request("loader/report_site_error.php",{parameters:{'message':textout},async:true});
    return true;
Then put this application online and see logs.
So i say

"if map working for you - it may not work for others"

And this is true.

some time ago i got bug report "hey men, there is no map on your site".
I test it - map exists, i test my site on other PC.. map exists..
I try to ask friends to test site... and.. MAP EXISTS!!!
but next day i`v got same bug report from other user..
So i impliment listed debug scripts and then i see.. 2000 users per day see my site with out map. 2000 users of 50k - 4%
So how to fix it

Step2. Start map

First include google loader
function add_script(src){
    var fileref=document.createElement("script");

function _do_requestLoader(domain){

var requestLoader_try=0;
function requestLoader(){
    if(requestLoader_try==0)_do_requestLoader("your domain code(.us,.ru,not just .com)");
    else                    _do_requestLoader("com");
Next try to call it and include google maps

GoogleMap.prototype.__init_loadingCycle = function (tick){
    var thisworker=this;
    //we have google loaded. sometimes( apple\safari google loads in 2-5 tick! )
    if(window.google && typeof(window.google)!=undefined && typeof(window.google.load)=='function'){
        this.console("google start at "+tick+" tick");
        google.load("maps", "3", {other_params:"sensor=true",
                    "callback" : function(){
                            thisworker.console("google post-activaion");
                        thisworker._enterState("google start",function(){
                    //and some others params like
                    "language" : "ru",
        //start timer
Next wait until maps starts, and request maps projection

//lest define projection helper
function GoogleV3ProjectionHelperOverlay(map)

GoogleMap.prototype.start = function ()
    var _this=this;
    //leave loading state
    var myOptions = {
      zoom: this.driver.getZoom(),
      center: this.fromLatLng(this.driver.getPosition()),
      mapTypeId: this.decodeMapType(this.driver.getMapType()),
    var thisworker=this;    
    this.api = new google.maps.Map(this.divId,myOptions);        
    //then define help projector
    GoogleV3ProjectionHelperOverlay.prototype = new google.maps.OverlayView();
    GoogleV3ProjectionHelperOverlay.prototype.draw = function () {
        if (!this.ready) {
            google.maps.event.trigger(this, 'ready');            
            this.ready = true;
            //if this overlay ready - start maps
    GoogleV3ProjectionHelperOverlay.prototype.tearMapOn = function(tick){
        //if it have panes - start map
                 _this._enterState("google-doStartInit - "+tick,function(){                 
            var __this=this;
    //sometimes it good to know how much time took loading of all tiles of map
    //call some callback on API init
    //init helperOverlay
    this.helperOverlay=new GoogleV3ProjectionHelperOverlay(this.api);

//this function will be called this helperOverlay starts
GoogleMap.prototype.doStartInit = function ()
   if( this.startIniter )

Map started!
and after this step we can convert latlng to pixels as in v2. Many users want fromLatLngToContainerPixel - here it is!

     var bounds=this.api.getBounds();//this.getBounds();
     var swPoint = this.fromLatLngToDivPixel(bounds.getSouthWest());
     var nePoint = this.fromLatLngToDivPixel(bounds.getNorthEast());
     return {x:point.x-swPoint.x*fac,y:point.y-nePoint.y*fac};
    var point=this.fromLatLngToDivPixel(a);
    return this.modPointByOffset(point,1);
    var point=this.modPointByOffset(a,-1);
    return this.fromDivPixelToLatLng(point);
GoogleMap.prototype.fromLatLngToDivPixel      =function(a){
    if(!this.helperOverlay) return {x:0,y:0};
    return this.helperOverlay.getProjection().fromLatLngToDivPixel(a);

GoogleMap.prototype.fromDivPixelToLatLng      =function(a){
    return this.toLatLng(this.helperOverlay.getProjection().fromDivPixelToLatLng(a));

Step3. Test it again

So we use enter and leavestate functions. The log working flow. If some event "enters", but not "leaves" - we will log.

GoogleMap.prototype._leaveState = function(_event){
    var _this=this;
    _this.console("["+_event.name+"] took " +(_event.leave-_event.enter));
    return _event;

GoogleMap.prototype.__callState = function (_event){
            this._leaveState(_event) ;
        this.console("state-error ["+_event.name+"] "+e.fileName+":"+e.lineNumber+"\n"+e+"\n"+e.stack);
        this._leaveState(_event) ;

GoogleMap.prototype._enterState = function(name,func,sync,catcheble){
    var _event={'name':name,'func':func,'enter':this.microtime(),'leave':0,'catcheble':catcheble};
    var _this=this;
    this.console('entering ['+name+']'+this._stages.length);
        if(sync){ _this.__callState(_event);
    return _event;

See error logs again.

W\O this patches 1-5% of request fails

with this patches still some request fails, but just some of this.

so test yourself and see. I test this on 4 sites with 150k unique visitors per day. And i think it is true that map exists not for all of then then you use "standart" way
What about you?

All of sections, i list here, is allready done by me. I need just to wrap code into article, and, yap, english article :)
If you want to know more - ask

How to start Google V3

Вперив взгляд в платяной шкаф, Кащей забормотал волшебную тарабарщину и взмахнул руками
Царь, царевич, король, королевич..