bdunnette/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Data Layer: Simple</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style>/* 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;
      }</style>
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzugPR5UwC_XDLGT7FdsA3C5cQYmVyEwg&callback=initMap&libraries=&v=weekly"
      async
    ></script>
    <script>
      let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 45, lng: -93.3 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "./stops.geojson"
  );
}
    </script>
  </body>
</html>

## stops.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              stops.geojson
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<title>Data Layer: Simple</title>
	<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
	<style>/* 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;
	}</style>
	</head>
	<body>
	<div id="map"></div>

	<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
	<script
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzugPR5UwC_XDLGT7FdsA3C5cQYmVyEwg&callback=initMap&libraries=&v=weekly"
	async
	></script>
	<script>
	let map;

	function initMap() {
	map = new google.maps.Map(document.getElementById("map"), {
	zoom: 11,
	center: { lat: 45, lng: -93.3 },
	});
	// NOTE: This uses cross-domain XHR, and may not work on older browsers.
	map.data.loadGeoJson(
	"./stops.geojson"
	);
	}
	</script>
	</body>
	</html>