title: Google Maps JS API v3 - Simple LineString example
body: <p>I'm a very experienced C++ and Python programmer but new to the Google Maps API and pretty new to JavaScript. I'm trying to get a simple example working to display part of the path of a train, using the LineString GeoJSON object type, constructed inline. I've tried moving my map dictionary inside a GeoJSON object constructor, modifying the style definition and moving it up and down, etc. But the best I can do is an empty map, I think centered where my overlay should be appearing. Trying this using the current Chrome and jsbin.com in Windows, and Firefox in Centos. Many thanks for any help! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Simple Map with StringLine&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #map {
          height: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
  
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lng: -73.945259, lat: 41.133659},
      zoom: 15
      });
  
    map.data.addGeoJson({
        "type": "LineString",
        "coordinates": [
           [-73.945259094199997, 41.133659362800003],
           [-73.945625305199997, 41.178726196299998],
           [-73.978820800799994, 41.2158432007],
           [-73.978256225600006, 41.249233245799999],
           [-73.954887390099998, 41.288650512700002],
           [-73.986076354999994, 41.322223663300001],
           [-73.965789794900004, 41.352313995400003],
           [-73.957283020000006, 41.382507324199999],
           [-73.968963622999993, 41.410072326700003],
           [-73.989562988299994, 41.439929962199997],
           [-74.015953064000001, 41.464096069299998],
           [-74.006843566900002, 41.499134063699998],
           [-73.999168396000002, 41.5377388],
           [-73.9613571167,      41.581764221199997],
           [-73.956344604500003, 41.627635955800002],
           [-73.948852539100002, 41.678043365500002],
           [-73.946556091299996, 41.729282379200001],
           [-73.9569854736,      41.7779464722],
           [-73.9701004028,      41.828430175800001],
           [-73.985443115199999, 41.881973266599999],
           [-74.006584167499994, 41.924633026099997],
           [-73.991699218799994, 41.975730896000002],
           [-73.982696533199999, 42.033111572300001],
           [-73.962783813499996, 42.085037231400001]
           ]
        });
    map.data.setStyle({
       strokeColor: "#FF0000",
       strokeOpacity: 0.8,
       strokeWeight: 10,
       });
  }
  
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
          async defer&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>