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.

Lippe

AFAIK there is no easy way to achieve that with Google Maps API. You can check developers.google.com/maps/documentation/javascript/styling which allows you to style your map as you wish. To overlay countries boundaries, you can check Fusion Tables. Here is an example dataset: google.com/fusiontables/… If you need more info on how to get this all together, let me know. – Mesmerize

From my experience, overlaying world countries boundaries on a map can be quite resource consuming. Therefore I would highly suggest that you import Fusion Tables data to your local DB and use it from there. – Mesmerize

MrUpsidedown, please any info on how to put it all together would be great, it seems like a solid solution. – Lippe

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:

Google Maps Styling Wizard

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 https://drive.google.com/file/d/1Qi4TOA3YUh3bL8SuIWbjA0B0QFIrA1ti/view?usp=sharing

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!

Mesmerize

Kindly note that some countries have multiple geometry sets, hence the if ('multi' in country) which I set with PHP. – Mesmerize

Just a hint: If you want it to look like the jvectormap, you could use styling to basically hide everything (except the water, maybe) and then overlay the countries. Have fun! – Mesmerize

To whoever upvoted this answer today: I updated the download link with the SQL file; the sendspace link was dead. – Mesmerize

Unable to view the styling.html file. – Buckjump

Not sure which link you were referring to. I updated the link to the Styling Wizard. The link to the SQL file is gone too. I'll update it asap. – Mesmerize

The download link for the SQL file with all countries has been updated. – Mesmerize