Why is fusionMap.js plugin changing the starting position of the Google map?

Question

So I've been trying for a long time to style custom google maps (Fusion Tables). I finally found this plugin 'fusionMap.js' which lets me reference some options in which I can change colour etc. etc.

As well as including jQuery and the plugin the only code I need to add is this...

    $('#map').fusionMap({
        publishedtable: 'https://www.google.com/fusiontables/embedviz?q=select+col6+from+1lIBTAqiuRK_U3PM9_8IB0fJjiyXmdPFZR5Jh5vuw&viz=MAP&h=false&lat=51.50644271284457&lng=-0.11780194013670364&t=1&z=13&l=col6&y=2&tmplt=2&hml=ONE_COL_LAT_LNG', // Link to published map
        mapstyles: 'scripts/maps/paledown.js' // Path to map
    });

This is great, and works in styling the map, however when I go to test this page the map doesn't start in the position its supposed to. The strange thing is when you go to the URL within this code it displays properly....

https://www.google.com/fusiontables/embedviz?q=select+col6+from+1lIBTAqiuRK_U3PM9_8IB0fJjiyXmdPFZR5Jh5vuw&viz=MAP&h=false&lat=51.50644271284457&lng=-0.11780194013670364&t=1&z=13&l=col6&y=2&tmplt=2&hml=ONE_COL_LAT_LNG

...but there doesn't seem to be anything in the jQuery which could change the position. Does anyone know why it might be moving, or does anyone know another way to style these maps if this won't work properly?

Here is a lovely coloured but wrongly positioned map... http://thetally.efinancialnews.com/tallyassets/hedgefundmap/index.html

Answer 1

That's because the plugin only works with positive coordinates

From the source code:

parseUrl: function(url){
    var lat = url.match(/lat=(\d*).(\d*)/);    // will only match positive numbers
    this.options.lat = lat[1] + '.' + lat[2];

    var lng = url.match(/lng=(\d*).(\d*)/);    // will only match positive numbers
    this.options.lng = lng[1] + '.' + lng[2];

    var styledId = url.match(/y=(\d*)/);
    this.options.styledId = parseInt(styledId[1]);

    var templateId = url.match(/tmplt=(\d*)/);
    this.options.templateId = parseInt(templateId[1]);

    var zoom = url.match(/&z=(\d*)/);
    this.options.zoom = parseInt(zoom[1]);

    var column = url.match(/col+(\d*)/);
    this.options.column = 'col'+column[1];

    var tableid = url.match(/from\+(.+)&viz/);
    this.options.tableid = tableid[1];
},

I couldn't set up an example on jsfiddle but to prove my assumption just have a look at the following link where I've replaced the longitude value with zero (as "seen" by the plugin).

https://www.google.com/fusiontables/embedviz?q=select+col6+from+1lIBTAqiuRK_U3PM9_8IB0fJjiyXmdPFZR5Jh5vuw&viz=MAP&h=false&lat=51.50644271284457&lng=0&t=1&z=13&l=col6&y=2&tmplt=2&hml=ONE_COL_LAT_LNG

To fix this you will have to slightly adjust the regex used for the extraction of the coordinates. Just add -? in the first group:

var lat = url.match(/lat=(-?\d*).(\d*)/);
this.options.lat = lat[1] + '.' + lat[2];

var lng = url.match(/lng=(-?\d*).(\d*)/);
this.options.lng = lng[1] + '.' + lng[2];