Public
Edited
Nov 29, 2022
1 star
// This embeds my key.
google = require('https://maps.googleapis.com/maps/api/js?key=AIzaSyCs3CRB9AZWump46zJX6gcGauRudeL9ciM')
.catch(() => window.google)
mapHolder = [0]
map = {
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:-147.364056169397, lat:59.2732081850753},
zoom: 6
});
mapHolder[0]=map
}
points = [
{ x: -147.364056169397, y: 59.2732081850753},
{ x: -147.364056169397, y: 59.3732081850753},
{ x: -147.364056169397, y: 59.4732081850753},
{ x: -147.364056169397, y: 59.6732081850753}
]
function getCircle(magnitude) {
return {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "red",
fillOpacity: 0.2,
//scale: Math.pow(2, magnitude) / 2,
scale: 20,
strokeColor: "white",
strokeWeight: 0.5,
};
}
//points.map( p => new google.maps.Marker( { position: { lng:p.x, lat:p.y }, map:mapHolder[0] } ) )
points.map( p => new google.maps.Marker( { position: { lng:p.x, lat:p.y }, icon: { path: google.maps.SymbolPath.CIRCLE,scale: 4}, 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.
