Google Map as a Vector Map

Question

I've searched every where for this, the closest I have found isn't very satisfactory (this), Is there anyway to get google maps looking and acting like jvectormap? By acting I mean hover-able countries etc, and by looking I mean the clean look that vectormap has.

Answer 1

As suggested in my comment, you can check how to style the map:

https://developers.google.com/maps/documentation/javascript/styling

This can help you understand how it works, and eventually let you build your own:

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Regarding Fusion Tables, once you find the appropriate data set (there are many, some are incomplete, more or less, and the level of geometry details can vary from one set to another), you can download it as a CSV, and import it to your DB. From there, you can query your DB and create polygons for each country. I will update my answer later with some code to help you get started.

Edit: Here is a data set I used for one of my projects. Maybe it can help you. It only holds the fields I was interested in, but has random colors associated with each country. http://www.sendspace.com/file/plgku3 https://www.dropbox.com/s/7o5y26gfim1asf0/gmaps_countries.sql?dl=1

Edit 2: Here is the JavaScript:

var g = google.maps;
var countries = [];

function jsonCountries() {

    $.ajax({

        url : 'get_countries.php',
        cache : true,
        dataType : 'json',
        async : true,

        success : function(data) {

            if (data) {

                $.each(data, function(id,country) {

                    var countryCoords;
                    var ca;
                    var co;

                    if ('multi' in country) {

                        var ccArray = [];

                        for (var t in country['xml']['Polygon']) {

                            countryCoords = [];

                            co = country['xml']['Polygon'][t]['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');

                            for (var i in co) {

                                ca = co[i].split(',');

                                countryCoords.push(new g.LatLng(ca[1], ca[0]));
                            }

                            ccArray.push(countryCoords);
                        }

                        createCountry(ccArray,country);

                    } else {

                        countryCoords = [];

                        co = country['xml']['outerBoundaryIs']['LinearRing']['coordinates'].split(' ');

                        for (var j in co) {

                            ca = co[j].split(',');

                            countryCoords.push(new g.LatLng(ca[1], ca[0]));
                        }

                        createCountry(countryCoords,country);
                    }
                });

                toggleCountries();
            }
        }
    });
}

function createCountry(coords, country) {

    var currentCountry = new g.Polygon({
        paths: coords,
        strokeColor: 'white',
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: country['color'],
        fillOpacity: .6
    });

    countries.push(currentCountry);
}

function toggleCountries() {

    for (var i=0; i<countries.length; i++) {

        if (countries[i].getMap() !== null) {

            countries[i].setMap(null);

        } else {

            countries[i].setMap(map);
        }
    }
}

And here is get_countries.php:

$results = array();

$sql = "SELECT * from gmaps_countries";
$result = $db->query($sql) or die($db->error);

while ($obj = $result->fetch_object()) {

    $obj->xml = simplexml_load_string($obj->geometry);
    $obj->geometry = '';

    foreach ($obj->xml->Polygon as $value) {

        $obj->multi = 'multigeo';
    }

    $results[] = $obj;
}

echo json_encode($results);

Just call jsonCountries() when you need. Hope this helps!