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.

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.

• javascript
• google-maps
• google-maps-api-3
• jvectormap

• 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. – MrUpsidown Commented Jan 23, 2014 at 8:08
• 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. – MrUpsidown Commented Jan 23, 2014 at 8:15
• MrUpsidedown, please any info on how to put it all together would be great, it seems like a solid solution. – user1278673 Commented Jan 23, 2014 at 8:18

1 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!