CODEWITHSUNDEEP
google-maps-api-3geojson
Buzzy Hopewell
Buzzy Hopewell

Reputation: 155

Google Maps JS API v3 - Simple LineString example

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! 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map with StringLine</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

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,
	    });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

Upvotes: 3

Views: 4665

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Your GeoJson is not valid for the .addGeoJson method, it throws a javascript error: `Uncaught InvalidValueError: not a Feature or FeatureCollection

(from the javascript console. See Troubleshooting in the documentation)

fiddle

If I make your GeoJson a FeatureCollection it works for me:

updated fiddle

code snippet:

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": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "prop0": "value0"
      }
    }, {
      "type": "Feature",
      "geometry": {

        "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,
  });
}

google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<!-- added 2/8/2023 to prevent:
Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
-->
<script>
function dummy() {}
window.dummy=dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map"></div>

Upvotes: 2

Related Questions