Published
Edited
Mar 18, 2018
2 forks
5 stars
// This embeds my key. Get your own key - this one will be cycled out very soon!
google = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyB4JQkUKSUqHQmteJ5xdk4RdrFqHi04hdg')
.catch(() => window.google)
mapHolder = [0]
{
let div = html`<div style='height:400px;'></div>`;
// Like Leaflet and Mapbox GL JS, Google Maps is very picky about
// needing to be initialized on a div that's already included
// in the page. So I yield the div first, to establish it in
// the page.
yield div;
let map = new google.maps.Map(div, {
center: {lng:-4.291884, lat:55.874113},
zoom: 15
});
mapHolder[0]=map
}
marker = new google.maps.Marker( { position: { lng:-4.291884, lat:55.874113 }, map:mapHolder[0] } )
points = [
{ x: -4.291884, y: 55.874113},
{ x: -4.291000, y: 55.874113},
{ x: -4.290000, y: 55.874113},
{ x: -4.289000, y: 55.874113},
]
points.map( p => new google.maps.Marker( { position: { lng:p.x, lat:p.y }, map:mapHolder[0] } ) )
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
