How to add GeoJSON(MultiLineString) layer to a Google Map

Question

I need to create maps that will use GeoJSON data(MultiLineString format) as a data layer over a Google Map. I have created a Google Maps JavaScript API project, and have an API key.

I have tried the following examples:

Example I:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
(This renders a polygon but does not seem to support the styling of a MultiLineString).

Example II:
https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop
(This example allows for addition of GeoJSON via Drag and Drop but I do not see how to save the map and data layer.)

Sample GeoJSON MultiLineString from http://geojsonlint.com :

{
    "type": "MultiLineString",
    "coordinates": [
        [
            [
                -105.0214433670044,
                39.57805759162015
            ],
            [
                -105.02150774002075,
                39.57780951131517
            ],
            [
                -105.02157211303711,
                39.57749527498758
            ],
            [
                -105.02157211303711,
                39.57716449836683
            ],
            [
                -105.02157211303711,
                39.57703218727656
            ],
            [
                -105.02152919769287,
                39.57678410330158
            ]
        ],
        [
            [
                -105.01989841461182,
                39.574997872470774
            ],
            [
                -105.01959800720215,
                39.57489863607502
            ],
            [
                -105.01906156539916,
                39.57478286010041
            ]
        ],
        [
            [
                -105.01717329025269,
                39.5744024519653
            ],
            [
                -105.01698017120361,
                39.574385912433804
            ],
            [
                -105.0166368484497,
                39.574385912433804
            ],
            [
                -105.01650810241699,
                39.5744024519653
            ],
            [
                -105.0159502029419,
                39.574270135602866
            ]
        ],
        [
            [
                -105.0142765045166,
                39.57397242286402
            ],
            [
                -105.01412630081175,
                39.57403858136094
            ],
            [
                -105.0138258934021,
                39.57417089816531
            ],
            [
                -105.01331090927124,
                39.57445207053608
            ]
        ]
    ]
}

Answer 1

Following the example in the documentation

Data class

google.maps.Data class

A layer for displaying geospatial data. Points, line-strings and polygons can be displayed.

Every Map has a Data object by default, so most of the time there is no need to construct one. For example:

var myMap = new google.maps.Map(...);
myMap.data.addGeoJson(...);
myMap.data.setStyle(...); 

proof of concept fiddle

code snippet:

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, 70.1419), zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP }); map.data.addGeoJson(jsonData); map.data.setStyle({ strokeColor: "blue" }) } google.maps.event.addDomListener(window, "load", initialize); var jsonData = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "stroke": "#555555", "stroke-width": 2, "stroke-opacity": 1 }, "geometry": { "type": "LineString", "coordinates": [ [ 79.8046875, 45.583289756006316 ], [ 73.828125, 48.922499263758255 ], [ 72.421875, 46.07323062540838 ], [ 72.0703125, 42.553080288955826 ], [ 79.453125, 41.77131167976407 ], [ 78.046875, 37.71859032558816 ], [ 72.7734375, 34.016241889667015 ], [ 66.796875, 39.63953756436671 ], [ 66.4453125, 48.45835188280866 ], [ 74.1796875, 53.74871079689897 ], [ 55.1953125, 55.7765730186677 ], [ 49.92187499999999, 48.69096039092549 ], [ 50.625, 40.17887331434696 ] ] } }] }; 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div> 

Answer 2

You can add the GeoJSON like

function loadGeoJsonString(geoString) {
  var geojson = JSON.parse(geoString);
  map.data.addGeoJson(geojson);
}

With

map.data.setStyle({
  //Put styling here
});

you can style your added GeoJSON. So the styling is not applied when you load the GeoJSON but you can add it afterwards.