Google Maps: How to create a polygon from a SVG Path

Question

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-jvectormap-es-mill-en.js

Answer 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);


function toLongitude(x) {
    return x * 180 / width;
}

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


function onLoad() {
    // 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 map
    var 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 coordinates
    var 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 map
    var 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;
    });
}  

Answer 2

<svg id="svg-sample" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2816 2048" >
<g>
    <polygon fill="#00B906" points="1413.9,1436.7 1552.9,1621.8 1768.6,1477.8 2005.8,1258.9 2092.2,1151.6 2104.9,1114.4 2064.8,1101.4 1985.8,1081.8 1903.3,1062.8 1857.2,1035.2 1835.8,1086.3 1741.8,1183 1624.5,1278"/>

    <polygon fill="#D02200" points="1766.4,379.8 1959,317.5 2066.6,557.2 2130.1,873.6 2137,1011.1 2124.1,1049.1 2086.9,1035.9 2009.7,1004.2 1933,971.6 1874.9,968.5 1888,913.5 1875.7,781.8 1846.6,632.8"/>
</g>
</svg>

function buildGMapPolyFromSVG(map, frameBounds, precision, svgId){
    //calc frame viewbox to gMaps coords scale factor (not viewport!)
    //precision is the number of coodinates decimals
    let lngRight = frameBounds.getNorthEast().lng();
    let lngLeft = frameBounds.getSouthWest().lng();
    let latTop = frameBounds.getNorthEast().lat();
    let latBottom = frameBounds.getSouthWest().lat();
    let lngDelta, latDelta;
    
    if(lngLeft<=0 && lngRight<=0 || lngLeft>=0 && lngRight>=0){
        lngDelta = Number(Math.abs(Math.abs(lngRight)-Math.abs(lngLeft)).toFixed(precision)); 
    }
    if(latBottom<=0 && latTop<=0 || latBottom>=0 && latTop>=0){
        latDelta = Number(Math.abs(Math.abs(latTop)-Math.abs(latBottom)).toFixed(precision)); 
    }
    //higher coordinate positive, lower coordinate negative
    if(lngLeft<0 && lngRight>=0){
        lngDelta = Number(Math.abs((lngLeft) + Math.abs(lngRight)).toFixed(precision)); 
    }
    if(latBottom<0 && latTop>=0){
        latDelta = Number(Math.abs((latBottom) + Math.abs(latTop)).toFixed(precision)); 
    }
    let frameSVG = document.querySelector(svgId);
    let viewboxWidth = frameSVG.viewBox.baseVal.width;
    let svgToCoordXscale = lngDelta/viewboxWidth;
    let viewboxHeight = frameSVG.viewBox.baseVal.height;
    let svgToCoordYscale = latDelta/viewboxHeight;
    
    let svgPolygons = frameSVG.querySelectorAll('polygon');     
    
    for(let i = 0; i < svgPolygons.length; i++){
        let polyCoordsFromSVGArt = [];
        for(let j = 0; j < svgPolygons[i].points.length; j++){
            let svgVertexX = svgPolygons[i].points[j].x*svgToCoordXscale;
            let xCoordValue = Number((lngLeft+svgVertexX).toFixed(precision));  
            
            let svgVertexY = svgPolygons[i].points[j].y*svgToCoordYscale;
            let yCoordValue = Number((latTop-svgVertexY).toFixed(precision));

            polyCoordsFromSVGArt.push({lat:yCoordValue ,lng:xCoordValue});
        }
        // Construct the polygon.
        let gmPoly = new google.maps.Polygon({
            paths: polyCoordsFromSVGArt,
            strokeColor: "#FF0000", 
            strokeWeight: 0,
            fillColor: svgPolygons[i].getAttribute('fill'),
            fillOpacity: 0.4,
        });
        gmPoly.setMap(map);
    }
}