Data Layer: Simple

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Data Layer: Simple</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: {
      lat: -28,
      lng: 137
    },
  });
  google.maps.event.addListener(map.data, 'addfeature', function(e) {
    console.log(e.feature.getGeometry().getType()); // MultiLineString Ok!
    // will center the map on the first vertex of the first LineString
    map.setCenter(e.feature.getGeometry().getAt(0).getAt(0));
    var marker = new google.maps.Marker({
      position: e.feature.getGeometry().getAt(0).getAt(0),
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    })
  });
  map.data.addGeoJson({
    "type": "Feature",
    geometry: {
      "type": "MultiLineString",
      "coordinates": [
        [
          [
            -105.021443,
            39.578057
          ],
          [
            -105.021507,
            39.577809
          ],
          [
            -105.021572,
            39.577495
          ],
          [
            -105.021572,
            39.577164
          ],
          [
            -105.021572,
            39.577032
          ],
          [
            -105.021529,
            39.576784
          ]
        ],
        [
          [
            -105.019898,
            39.574997
          ],
          [
            -105.019598,
            39.574898
          ],
          [
            -105.019061,
            39.574782
          ]
        ],
        [
          [
            -105.017173,
            39.574402
          ],
          [
            -105.01698,
            39.574385
          ],
          [
            -105.016636,
            39.574385
          ],
          [
            -105.016508,
            39.574402
          ],
          [
            -105.01595,
            39.57427
          ]
        ],
        [
          [
            -105.014276,
...