Google Maps JavaScript API v3 / Data Layer / Marke

Question

Can you help me please to create marker cluster with MarkerClustererPlus. I load the data with:

layer = map.data.loadGeoJson('resources/data.geojson');

and the markers are visible, but i have not idea how to create markercluster. Do i have to parse the data.geojson-file into an array? Thanks.

function initialize() {
map = new google.maps.Map(document.getElementById('map'), mapOptions);
layer = map.data.loadGeoJson('resources/data.geojson');

map.data.setStyle({icon: icon});

map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty('name');
infobox.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infobox.setPosition(event.feature.getGeometry().get());
infobox.setOptions({pixelOffset: new google.maps.Size(0,0)});
infobox.open(map);
});  

google.maps.event.addListener(map, "click", function(){
infobox.close();
});

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);

Here is a piece of my GeoJson-File (this piece and the whole file is tested by GeoJSONLint.

{
"type": "FeatureCollection",
"icon": "resources/icon.png",
"features": [
{
"type": "Feature","properties": {"name":"Bielefeld"},
"geometry": {"type": "Point","coordinates":[8.528849, 52.030656]}
},
{
"type": "Feature","properties": {"name":"Herford"},
"geometry": {"type": "Point","coordinates":[8.676780, 52.118003]}
},
{
"type": "Feature","properties": {"name":"Guetersloh"},
"geometry": {"type": "Point","coordinates":[8.383353, 51.902917]}
}
]
}

Answer 1

The shapes created for the data-layer are not accessible via the API, but you must have a reference to the markers to be able to add them to the clusterer.

Possible solution:

Observe the addfeature-event of the data and create your own markers. The markers created for the data-layer hide(either via the visible-style set to false or remove the feature completely when you don't need to access it later)

Example:

 var mc=new MarkerClusterer(map);

 map.data.addListener('addfeature',function(e){
  var geo=  e.feature.getGeometry();

  if(geo.getType()==='Point'){

    mc.addMarker(new google.maps.Marker({position:geo.get(),
                                         title   :e.feature.getProperty('name')}));
    map.data.remove(e.feature);
  }
 });

Demo: http://jsfiddle.net/doktormolle/myuua77p/

Of course this solution creates some overhead. When there are only Points inside the FeatureCollection you better parse the geoJSON on your own instead of using the data-layer

Answer 2

1. create a MarkerClusterer to manage the markers.

   var markerClusterer = new MarkerClusterer();
   

2. add each marker to it when the data layer fires the addfeature event.

   markerClusterer.addMarker(marker);
   

3. hide the data layer markers.

   map.data.setMap(null);
   

working jsfiddle

var markerClusterer = new MarkerClusterer();
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52, 8),
        zoom: 4
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    markerClusterer.setMap(map);
    google.maps.event.addListener(map.data, 'addfeature', function (e) {
        if (e.feature.getGeometry().getType() === 'Point') {
            var marker = new google.maps.Marker({
                position: e.feature.getGeometry().get(),
                title: e.feature.getProperty('name'),
                map: map
            });
            // open the infoBox when the marker is clicked
            google.maps.event.addListener(marker, 'click', function (marker, e) {
                return function () {

                    var myHTML = e.feature.getProperty('name');
                    boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
                    infobox.setPosition(e.feature.getGeometry().get());
                    infobox.setOptions({
                        pixelOffset: new google.maps.Size(0, 0)
                    });
                    infobox.open(map);
                };
            }(marker, e));
            markerClusterer.addMarker(marker);
            bounds.extend(e.feature.getGeometry().get());
            map.fitBounds(bounds);
            map.setCenter(e.feature.getGeometry().get());
        }
    });
    layer = map.data.addGeoJson(geoJson);
    map.data.setMap(null);
    google.maps.event.addListener(map, "click", function () {
        infobox.close();
    });
}

code snippet:

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Bielefeld"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Herford"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.676780, 52.118003]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};
var map = null;
var bounds = new google.maps.LatLngBounds();

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

var markerClusterer = new MarkerClusterer(null, null, {
  imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"
});

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(52, 8),
    zoom: 4
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  markerClusterer.setMap(map);
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    if (e.feature.getGeometry().getType() === 'Point') {
      var marker = new google.maps.Marker({
        position: e.feature.getGeometry().get(),
        title: e.feature.getProperty('name'),
        map: map
      });
      google.maps.event.addListener(marker, 'click', function(marker, e) {
        return function() {

          var myHTML = e.feature.getProperty('name');
          boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
          infobox.setPosition(e.feature.getGeometry().get());
          infobox.setOptions({
            pixelOffset: new google.maps.Size(0, 0)
          });
          infobox.open(map);
        };
      }(marker, e));
      markerClusterer.addMarker(marker);
      bounds.extend(e.feature.getGeometry().get());
      map.fitBounds(bounds);
      map.setCenter(e.feature.getGeometry().get());
    }
  });
  layer = map.data.addGeoJson(geoJson);
  map.data.setMap(null);
  google.maps.event.addListener(map, "click", function() {
    infobox.close();
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

#map {
  width: 500px;
  height: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

Answer 3

Rather old question, but there is no longer any need to take that detour adding regular markers and clearing them from the data layer (especially if you need to later get the map content as GeoJSON again after editing the map).

You can use https://github.com/Connum/data-layer-clusterer, which I just enhanced to make it work for LineString and Polygon features as well.

Here's a working example:

window.initMap = function() {
  map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 49.0192242, lng: 8.4051448},
  zoom: 13,
  scaleControl: false,
  streetViewControl: false,
  rotateControl: false,
  });

  var s = document.createElement( 'script' );
  s.setAttribute( 'src', 'https://cdn.rawgit.com/Connum/data-layer-clusterer/master/src/datalayerclusterer.js' );
  s.async = false;
  document.head.appendChild( s );
  s.onload = function() {
var cluster = new DataLayerClusterer({
"map": map
  });

  cluster.addGeoJson({
"type": "FeatureCollection",
"features": [
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.404455900017638,
  49.013533476349956
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.401044130150694,
  49.01396272155595
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.400035619561095,
  49.01183053267183
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.40565752965631,
  49.01064125233564
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.402932405297179,
  49.01073977367939
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.403726339165587,
  49.01247793961102
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.404820680443663,
  49.01244275466763
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.404724120919127,
  49.01104237373055
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.403586864296813,
  49.011105708392215
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.409692287095822,
  49.012400532702735
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.411816596635617,
  49.014638247499114
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.409027099260129,
  49.017537275583216
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.398555755265988,
  49.01670698867642
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.396946429857053,
  49.0123160886655
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39379215205554,
  49.00865670946874
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.411065578111447,
  49.00868485956599
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.413211345323361,
  49.01026123961204
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.400143623002805,
  49.007558843262004
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.400422572740354,
  49.00857225908148
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.403812884935178,
  49.007882575557474
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.407074451097287,
  49.007404014028836
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.407546519883908,
  49.00957157948308
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.407310485490598,
  49.013976795106586
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.40351247752551,
  49.017354332200135
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.404177665361203,
  49.019043014809284
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.402332305558957,
  49.01567966536862
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.397225379594602,
  49.015496715158264
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.393341540941037,
  49.01674920698892
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39402818644885,
  49.01396272155595
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39276218379382,
  49.01209090386598
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.395551681169309,
  49.011443491893736
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39874887431506,
  49.0145256604785
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.402203559526242,
  49.01627073068373
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.408447742112912,
  49.016692915897615
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.409306048997678,
  49.0153278374442
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.415936469682492,
  49.01649589657675
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.415357112535276,
  49.012766455208926
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.41200971568469,
  49.01306200603891
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.410357474931516,
  49.011654605418435
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.407396316179074,
  49.01235831070202
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.410293101915158,
  49.01456788064106
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.40773963893298,
  49.01587668792012
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.405186175950803,
  49.01569373843385
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.404306411393918,
  49.01508859303522
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.403319358476438,
  49.01711509753079
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.400486945756711,
  49.018578632802985
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.398040771135129,
  49.018409765544675
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.395895003923215,
  49.01842383783808
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.395830630906858,
  49.017058806853235
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.395422935136594,
  49.01586261490659
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.396324157365598,
  49.013807912236224
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.399542808183469,
  49.01334348138857
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.401259421953,
  49.01332940765888
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.398469924577512,
  49.01033161255747
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.396731853135861,
  49.01048643268729
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39701080287341,
  49.00864263441412
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.394135474809445,
  49.008389282751025
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.392955302842893,
  49.01043013451395
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.396152495988645,
  49.0076714460383
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.409713744767942,
  49.00689729680877
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.412074088701047,
  49.0073617877908
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.401259421953,
  49.006489104187075
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.424090385087766,
  49.01138719480263
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.421644210466184,
  49.01417382439788
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.418425559648313,
  49.016692915897615
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.41848993266467,
  49.017452840259196
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.419884681352414,
  49.01233016268164
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.417266845353879,
  49.01024716501104
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.414949416765012,
  49.00891005977109
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.41548585856799,
  49.00754476789709
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.425055980333127,
  49.00778404855994
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.42400455439929,
  49.01266793787567
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.421322345384397,
  49.00872708468202
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.419906139024533,
  49.00692544790073
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.418447017320432,
  49.00776997325865
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.417803287156858,
  49.01261164216915
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.416365623124875,
  49.016186293211256
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.4132542606676,
  49.01772021829393
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.411816596635617,
  49.017072879528584
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.41151618922595,
  49.01614407442129
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.413425922044553,
  49.01358273418453
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39201116526965,
  49.018466054694436
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.390830993303098,
  49.01575003065509
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.388749599107541,
  49.017143242845684
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.38954353297595,
  49.0135123658345
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.389693736680783,
  49.01230201464536
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.389350413926877,
  49.01059902884291
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.389672279008664,
  49.00931823254672
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39078807795886,
  49.00789665082693
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.392354488023557,
  49.007178807012075
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.397461413987912,
  49.00696767450883
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Polygon",
"coordinates": [
  [
    [
      8.399607181199826,
      49.01534191060892
    ],
    [
      8.399907588609494,
      49.01462417413546
    ],
    [
      8.400615691789426,
      49.01448344028011
    ],
    [
      8.401087760576047,
      49.01470861425769
    ],
    [
      8.401109218248166,
      49.01489156736447
    ],
    [
      8.40050840342883,
      49.01529969110284
    ],
    [
      8.400486945756711,
      49.015947052928105
    ],
    [
      8.399607181199826,
      49.01534191060892
    ]
  ]
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Polygon",
"coordinates": [
  [
    [
      8.404563903459348,
      49.017143242845684
    ],
    [
      8.404220580705442,
      49.01641145948622
    ],
    [
      8.40449953044299,
      49.016073709691824
    ],
    [
      8.4057440754259,
      49.01614407442129
    ],
    [
      8.405593871721067,
      49.01710102486738
    ],
    [
      8.40527200663928,
      49.01691807988091
    ],
    [
      8.404885768541135,
      49.01700251611205
    ],
    [
      8.404885768541135,
      49.017255823946115
    ],
    [
      8.404563903459348,
      49.017143242845684
    ]
  ]
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Polygon",
"coordinates": [
  [
    [
      8.41321277548559,
      49.00502521347455
    ],
    [
      8.412912368075922,
      49.00454662448421
    ],
    [
      8.41943550040014,
      49.002829296715134
    ],
    [
      8.421752928989008,
      49.000745901563036
    ],
    [
      8.423169135348871,
      49.0011682184338
    ],
    [
      8.42419910361059,
      49.002688529517854
    ],
    [
      8.41321277548559,
      49.00502521347455
    ]
  ]
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "LineString",
"coordinates": [
  [
    8.387935637729242,
    49.01496193376498
  ]
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "LineString",
"coordinates": [
  [
    8.387420653598383,
    49.01051458175004
  ],
  [
    8.38797855307348,
    49.01499008029734
  ],
  [
    8.38849353720434,
    49.016932152596056
  ],
  [
    8.38948059012182,
    49.01873342728651
  ],
  [
    8.391798018710688,
    49.02092864268258
  ],
  [
    8.394544600741938,
    49.02247649276904
  ],
  [
    8.397162436740473,
    49.023461463214126
  ],
  [
    8.400381087558344,
    49.02413686025233
  ],
  [
    8.402655600802973,
    49.02436199056141
  ],
  [
    8.406260489718989,
    49.02419314292509
  ],
  [
    8.410079955356196,
    49.02323632883109
  ],
  [
    8.412096976535395,
    49.022392065823794
  ],
  [
    8.414414405124262,
    49.02081606988936
  ],
  [
    8.41673183371313,
    49.019043014809284
  ],
  [
    8.418105124728754,
    49.016481823738275
  ],
  [
    8.418276786105707,
    49.01403308926939
  ],
  [
    8.418105124728754,
    49.011274600429445
  ],
  [
    8.417547225253657,
    49.00967010294351
  ],
  [
    8.417289733188227,
    49.008881909801154
  ],
  [
    8.387420653598383,
    49.01051458175004
  ]
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.399053572211415,
  49.02233578111405
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.399311064276844,
  49.02593787420766
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39467620709911,
  49.02886438286371
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.393732069525868,
  49.02357403002371
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.387294767890126,
  49.023011193429554
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.387809752020985,
  49.02661323763608
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.406005857978016,
  49.025375064348665
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.41639137128368,
  49.022898625346855
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.403001783881336,
  49.02092864268258
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39793777326122,
  49.02295490942005
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.409868238959461,
  49.02216692660292
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.424030302558094,
  49.02441827297955
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.426433561835438,
  49.02644439763833
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.428236006293446,
  49.023011193429554
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.418708799872547,
  49.0211537875052
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.417764662299305,
  49.022898625346855
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.424030302558094,
  49.0204220631079
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.428750990424305,
  49.01591890693685
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.43312835553661,
  49.019465176509826
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.435703276190907,
  49.02087235631782
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.424802778754383,
  49.01907115903407
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.387552259955555,
  49.0211537875052
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.38120078900829,
  49.0172136060633
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.38145828107372,
  49.01597519890346
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.385234831366688,
  49.016481823738275
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.38368987897411,
  49.02087235631782
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.384033201728016,
  49.019746615654235
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.383604048285633,
  49.0249248118783
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.3859214768745,
  49.02644439763833
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.423171995673329,
  49.01839569324728
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.419481276068836,
  49.021604074094846
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.408237455878407,
  49.021604074094846
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.39665031293407,
  49.020984928983715
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.387723921332508,
  49.022673488417595
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.390813826117665,
  49.02199807151889
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.390899656806141,
  49.02644439763833
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.40566253522411,
  49.0284141619659
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.40214347699657,
  49.02593787420766
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.401199339423329,
  49.0291457688561
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.41115569928661,
  49.02706347482933
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.41415977338329,
  49.02441827297955
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.409181593451649,
  49.02633183732152
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.418107985053211,
  49.02756998680219
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.421197889838368,
  49.02520622014968
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.415189741645008,
  49.027119754192036
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.416992186103016,
  49.02610671592411
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.384462355170399,
  49.01394864800132
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.385320662055165,
  49.01254127244647
]
  }
},
{
  "type": "Feature",
  "geometry": {
"type": "Point",
"coordinates": [
  8.424974440131336,
  49.01681957076354
]
  }
}
]
});
  }
  
}

var s = document.createElement( 'script' );
s.setAttribute( 'src', 'https://maps.googleapis.com/maps/api/js?v=3&callback=initMap' );
s.async = false;
document.head.appendChild( s );

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

<div id="map"></div>