Skip to content

Instantly share code, notes, and snippets.

@bdunnette
Last active April 2, 2021 19:33
Show Gist options
  • Save bdunnette/27a0bb6da92f5882e9193924429cd24b to your computer and use it in GitHub Desktop.
Save bdunnette/27a0bb6da92f5882e9193924429cd24b to your computer and use it in GitHub Desktop.
MetroTransit Route 11 Stops
<!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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment