Google Maps: How To Create A Polygon From A Svg Path

Is there any way in the Google Maps Javascript API to create a Polygon (not a symbol!) from a SVG Path? I'd like to show these regions on the map http://jvectormap.com/js/jquery-

Solution 1:

Its a little unclear about what you are looking for exactly, but you can draw a polygon or polyline on Google Maps per the API. Google also gives helpful interactive examples here (check the drawing on the map section). Getting the points from an SVG is a matter of parsing the points or d attribute of the SVG element. But note that the coordinates are in latitude and longitude.

EDIT: I have a code example of parsing an SVG path and drawing it on the map. You can adjust the toLatitude and toLongitude functions to adjust the scale from SVG coordinates to map coordinates to fit your needs. This should also work for SVG polygons and polylines by changing

var path = document.getElementById("my-path-id").getAttribute("d");

to

var path = document.getElementById("my-polygon-id").getAttribute("points");

Here is the full code:

var width = 400, // width of SVG
    height = 200; // height of SVG

google.maps.event.addDomListener(window, 'load', onLoad);


functiontoLongitude(x) {
    return x * 180 / width;
}

functiontoLatitude(y) {
    return -y * 180 / width + 90;
}


functiononLoad() {
    // The SVG path;var path = document.getElementById("my-path-id").getAttribute("d");

    // Get the points. Even indices are x coordinates and odd indices are y// coordinates. Note that these are strings.var points = path.match(/(\d+)/g);

    // Initialize the mapvar mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(45, 0),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
                                  mapOptions);

    // Map polygon coordinatesvar polyCoordinates = [];
    for (var i = 0; i < points.length; i += 2) {
        var longitude = toLongitude(parseInt(points[i])),
            latitude = toLatitude(parseInt(points[i + 1]));

        polyCoordinates.push(new google.maps.LatLng(latitude, longitude));
    }

    var polygon = new google.maps.Polygon({
        paths: polyCoordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    polygon.setMap(map);
}

Edit 2: If you want to draw high quality regions, drawing polygons on Google maps may not be the best option. Alternatively, iyou could use the jVectorMap library (which you linked to), Google's Geomap API, or d3.

Although, if you do want to use Google maps, I would recommend using FusionTables. I'm including a modified onLoad function is based on this site.

function onLoad() {      
    // Initialize the mapvar mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(40, -4), // Center of Spain
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
                              mapOptions);

    var layerOptions = {
        query: {
            select: "kml_4326",
            from: "420419",
            where: "\'name_0\' = \'Spain\'"
        }
    }
    var layer = new google.maps.FusionTablesLayer(layerOptions);
    layer.setMap(map);

    // Displays the name of the region
    google.maps.event.addListener(layer, "click", function(e) {
        e.infoWindowHtml = e.row.name_1.value;
    });
}