mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
824 lines
22 KiB
TypeScript
824 lines
22 KiB
TypeScript
// Test file for Google Maps JavaScript API Definition file
|
|
|
|
let mapOptions: google.maps.MapOptions = {
|
|
backgroundColor: '#fff',
|
|
center: { lat: -25.363, lng: 131.044 },
|
|
clickableIcons: true,
|
|
controlSize: 30,
|
|
draggable: true,
|
|
fullscreenControl: true,
|
|
fullscreenControlOptions: {
|
|
position: google.maps.ControlPosition.RIGHT_TOP,
|
|
},
|
|
gestureHandling: 'cooperative',
|
|
restriction: {
|
|
latLngBounds: { east: 180, west: -180, north: 85, south: -85 },
|
|
strictBounds: true,
|
|
},
|
|
scrollwheel: true,
|
|
styles: [
|
|
{
|
|
elementType: 'geometry',
|
|
featureType: 'water',
|
|
stylers: [
|
|
{
|
|
color: '#00bdbd',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
elementType: 'geometry',
|
|
featureType: 'landscape.man_made',
|
|
stylers: [
|
|
{
|
|
color: '#f7f1df',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
zoom: 4,
|
|
};
|
|
|
|
/***** Create map *****/
|
|
let map: google.maps.Map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
|
|
|
/***** Fitting map to bounds *****/
|
|
map.fitBounds(
|
|
{
|
|
north: 10,
|
|
east: 10,
|
|
west: 10,
|
|
south: 10,
|
|
},
|
|
50,
|
|
);
|
|
|
|
map.fitBounds(
|
|
{
|
|
east: 10,
|
|
north: 10,
|
|
south: 10,
|
|
west: 10,
|
|
},
|
|
{
|
|
bottom: 100,
|
|
left: 150,
|
|
right: 150,
|
|
top: 50,
|
|
},
|
|
);
|
|
|
|
/***** Pan map to bounds *****/
|
|
map.panToBounds({
|
|
north: 10,
|
|
east: 10,
|
|
west: 10,
|
|
south: 10,
|
|
});
|
|
|
|
map.panToBounds(
|
|
{
|
|
north: 10,
|
|
east: 10,
|
|
west: 10,
|
|
south: 10,
|
|
},
|
|
50,
|
|
);
|
|
|
|
map.panToBounds(
|
|
{
|
|
east: 10,
|
|
north: 10,
|
|
south: 10,
|
|
west: 10,
|
|
},
|
|
{
|
|
bottom: 100,
|
|
left: 150,
|
|
right: 150,
|
|
top: 50,
|
|
},
|
|
);
|
|
|
|
map.getProjection(); // $ExpectType Projection | null
|
|
|
|
/***** Data *****/
|
|
|
|
new google.maps.Data();
|
|
new google.maps.Data({ map });
|
|
|
|
let latLng = new google.maps.LatLng(52.201203, -1.72437);
|
|
let feature = new google.maps.Data.Feature();
|
|
let geometry = new google.maps.Data.Geometry();
|
|
|
|
let data = map.data;
|
|
|
|
data.add(feature);
|
|
|
|
data.add({
|
|
geometry: latLng,
|
|
id: 'Test feature',
|
|
properties: {},
|
|
});
|
|
|
|
let isIn: boolean = map.data.contains(feature);
|
|
|
|
data.forEach((feature: google.maps.Data.Feature) => {
|
|
console.log(feature.getId());
|
|
});
|
|
|
|
map = data.getMap();
|
|
data.setMap(map);
|
|
|
|
let style = data.getStyle();
|
|
data.setStyle(style);
|
|
|
|
data.setStyle({
|
|
clickable: true,
|
|
cursor: 'pointer',
|
|
fillColor: '#79B55B',
|
|
fillOpacity: 1,
|
|
icon: { url: '//maps.google.com/mapfiles/ms/icons/blue.png' },
|
|
shape: { coords: [1, 2, 3], type: 'circle' },
|
|
strokeColor: '#79B55B',
|
|
strokeOpacity: 1,
|
|
strokeWeight: 1,
|
|
title: 'string',
|
|
visible: true,
|
|
zIndex: 1,
|
|
});
|
|
|
|
data.overrideStyle(feature, { visible: true });
|
|
data.revertStyle(feature);
|
|
|
|
data.addGeoJson({
|
|
type: 'Feature',
|
|
geometry: { type: 'Point', coordinates: [59.32709, 18.103701] },
|
|
});
|
|
data.addGeoJson(
|
|
{
|
|
type: 'FeatureCollection',
|
|
features: [
|
|
{
|
|
type: 'Feature',
|
|
properties: { dymmy: '7' },
|
|
geometry: {
|
|
type: 'Polygon',
|
|
coordinates: [
|
|
[
|
|
[123.61, -22.14],
|
|
[122.38, -21.73],
|
|
[121.06, -21.69],
|
|
[119.66, -22.22],
|
|
[119.0, -23.4],
|
|
[123.61, -22.14],
|
|
],
|
|
],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{ idPropertyName: 'Test feature' },
|
|
);
|
|
|
|
data.loadGeoJson('http://magicGeoJsonSource.com');
|
|
|
|
data.loadGeoJson('http://magicGeoJsonSource.com', { idPropertyName: 'test' });
|
|
|
|
data.loadGeoJson('http://magicGeoJsonSource.com', { idPropertyName: 'test' }, features => {
|
|
for (let i = 0, len = features.length; i < len; i++) {
|
|
console.log(features[i].getId());
|
|
}
|
|
});
|
|
|
|
data.toGeoJson(feature => {});
|
|
|
|
let dataMouseEvent: google.maps.Data.MouseEvent = {
|
|
feature,
|
|
latLng,
|
|
stop: (): void => {},
|
|
};
|
|
|
|
let addFeatureEvent: google.maps.Data.AddFeatureEvent = {
|
|
feature,
|
|
};
|
|
|
|
let removeFeatureEvent: google.maps.Data.RemoveFeatureEvent = {
|
|
feature,
|
|
};
|
|
|
|
let setGeometryEvent: google.maps.Data.SetGeometryEvent = {
|
|
feature,
|
|
newGeometry: geometry,
|
|
oldGeometry: geometry,
|
|
};
|
|
|
|
let setPropertyEvent: google.maps.Data.SetPropertyEvent = {
|
|
feature,
|
|
name: 'test',
|
|
newValue: {},
|
|
oldValue: {},
|
|
};
|
|
|
|
let removePropertyEvent: google.maps.Data.RemovePropertyEvent = {
|
|
feature,
|
|
name: 'test',
|
|
oldValue: {},
|
|
};
|
|
|
|
let lineString = new google.maps.Data.LineString([
|
|
{ lat: 52.201203, lng: -1.72437 },
|
|
{ lat: 52.201203, lng: -2.72437 },
|
|
]);
|
|
lineString.forEachLatLng(latLng => console.log(`${latLng.lat} ${latLng.lng}`));
|
|
|
|
data.setDrawingMode('LineString');
|
|
data.setDrawingMode(null);
|
|
|
|
data.setControls(['Point', 'Polygon']);
|
|
data.setControls(null);
|
|
|
|
/***** Overlays *****/
|
|
|
|
let icon: google.maps.Icon = {
|
|
anchor: new google.maps.Point(16, 16),
|
|
origin: new google.maps.Point(0, 0),
|
|
scaledSize: new google.maps.Size(32, 32),
|
|
size: new google.maps.Size(32, 32),
|
|
url: 'dummy',
|
|
};
|
|
|
|
/***** MapTypeStyle *****/
|
|
|
|
let mapTypeStyle1: google.maps.MapTypeStyle = {
|
|
featureType: 'all',
|
|
};
|
|
|
|
let mapTypeStyle2: google.maps.MapTypeStyle = {
|
|
featureType: 'administrative.country',
|
|
elementType: 'all',
|
|
stylers: [],
|
|
};
|
|
|
|
let mapTypeStyle3: google.maps.MapTypeStyle = {
|
|
featureType: 'landscape.natural',
|
|
elementType: 'geometry',
|
|
stylers: [],
|
|
};
|
|
|
|
let mapTypeStyle4: google.maps.MapTypeStyle = {
|
|
featureType: 'poi.school',
|
|
elementType: 'labels',
|
|
stylers: [],
|
|
};
|
|
|
|
/***** MARKERS *****/
|
|
|
|
// Marker class
|
|
|
|
google.maps.Marker.MAX_ZINDEX; // $ExpectType number
|
|
google.maps.Marker.MAX_ZINDEX = 10; // $ExpectError
|
|
|
|
// Marker constructor
|
|
|
|
const marker = new google.maps.Marker();
|
|
|
|
const markerWithEmptyOptions = new google.maps.Marker({});
|
|
|
|
const markerWithAllOptions = new google.maps.Marker({
|
|
anchorPoint: new google.maps.Point(0, 0),
|
|
animation: google.maps.Animation.BOUNCE,
|
|
clickable: true,
|
|
crossOnDrag: true,
|
|
cursor: 'test',
|
|
draggable: true,
|
|
icon: 'test',
|
|
label: 'test',
|
|
map: new google.maps.Map(document.createElement('div')),
|
|
opacity: 0.5,
|
|
optimized: true,
|
|
position: { lat: 0, lng: 0 },
|
|
title: 'test',
|
|
visible: true,
|
|
zIndex: 0,
|
|
});
|
|
|
|
// Marker methods
|
|
|
|
marker.getAnimation(); // $ExpectType Animation | null | undefined
|
|
|
|
marker.getClickable(); // $ExpectType boolean
|
|
|
|
marker.getCursor(); // $ExpectType string | null | undefined
|
|
|
|
marker.getDraggable(); // $ExpectType boolean | null | undefined
|
|
|
|
marker.getIcon(); // $ExpectType string | ReadonlyIcon | ReadonlySymbol | null | undefined
|
|
|
|
marker.getLabel(); // $ExpectType ReadonlyMarkerLabel | null | undefined
|
|
|
|
marker.getMap(); // $ExpectType Map | StreetViewPanorama | null | undefined
|
|
|
|
marker.getOpacity(); // $ExpectType number | null | undefined
|
|
|
|
marker.getPosition(); // $ExpectType LatLng | null | undefined
|
|
|
|
marker.getShape(); // $ExpectType MarkerShapeCircle | MarkerShapeRect | MarkerShapePoly | null | undefined
|
|
|
|
marker.getTitle(); // $ExpectType string | null | undefined
|
|
|
|
marker.getVisible(); // $ExpectType boolean
|
|
|
|
marker.getZIndex(); // $ExpectType number | null | undefined
|
|
|
|
marker.setAnimation(google.maps.Animation.BOUNCE);
|
|
marker.setAnimation(null);
|
|
|
|
marker.setClickable(true);
|
|
|
|
marker.setCursor('test');
|
|
marker.setCursor(null);
|
|
|
|
marker.setDraggable(true);
|
|
marker.setDraggable(null);
|
|
|
|
marker.setIcon({
|
|
anchor: new google.maps.Point(0, 0),
|
|
labelOrigin: new google.maps.Point(0, 0),
|
|
origin: new google.maps.Point(0, 0),
|
|
scaledSize: new google.maps.Size(10, 10),
|
|
size: new google.maps.Size(10, 10),
|
|
url: 'test',
|
|
});
|
|
marker.setIcon({ url: 'test' });
|
|
marker.setIcon({
|
|
anchor: new google.maps.Point(0, 0),
|
|
fillColor: 'black',
|
|
fillOpacity: 0,
|
|
labelOrigin: new google.maps.Point(0, 0),
|
|
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
|
|
rotation: 0,
|
|
scale: 1,
|
|
strokeColor: 'black',
|
|
strokeOpacity: 0,
|
|
strokeWeight: 0,
|
|
});
|
|
marker.setIcon({}); // $ExpectError
|
|
marker.setIcon('test');
|
|
marker.setIcon(null);
|
|
|
|
marker.setLabel({
|
|
text: 'test',
|
|
color: 'test',
|
|
fontFamily: 'test',
|
|
fontSize: 'test',
|
|
fontWeight: 'test',
|
|
});
|
|
marker.setLabel({ text: 'test' });
|
|
marker.setLabel({}); // $ExpectError
|
|
marker.setLabel('test');
|
|
marker.setLabel(null);
|
|
|
|
marker.setMap(new google.maps.Map(document.createElement('div')));
|
|
marker.setMap(new google.maps.StreetViewPanorama(document.createElement('div')));
|
|
marker.setMap(null);
|
|
|
|
marker.setOpacity(0.5);
|
|
marker.setOpacity(null);
|
|
|
|
marker.setOptions({
|
|
anchorPoint: new google.maps.Point(0, 0),
|
|
animation: google.maps.Animation.BOUNCE,
|
|
clickable: true,
|
|
crossOnDrag: true,
|
|
cursor: '',
|
|
draggable: true,
|
|
icon: '',
|
|
label: '',
|
|
map,
|
|
opacity: 0.5,
|
|
optimized: true,
|
|
position: { lat: 0, lng: 0 },
|
|
title: '',
|
|
visible: true,
|
|
zIndex: 0,
|
|
});
|
|
marker.setOptions({});
|
|
|
|
marker.setPosition(new google.maps.LatLng(0, 0));
|
|
marker.setPosition({ lat: 0, lng: 0 });
|
|
marker.setPosition(null);
|
|
|
|
marker.setShape({ type: 'circle' }); // $ExpectError
|
|
marker.setShape({ type: 'circle', coords: [] }); // $ExpectError
|
|
marker.setShape({ type: 'circle', coords: [0] }); // $ExpectError
|
|
marker.setShape({ type: 'circle', coords: [0, 0] }); // $ExpectError
|
|
marker.setShape({ type: 'circle', coords: [0, 0, 10] });
|
|
marker.setShape({ type: 'circle', coords: [0, 0, 10, 0] }); // $ExpectError
|
|
marker.setShape({ type: 'rect' }); // $ExpectError
|
|
marker.setShape({ type: 'rect', coords: [0] }); // $ExpectError
|
|
marker.setShape({ type: 'rect', coords: [0, 0] }); // $ExpectError
|
|
marker.setShape({ type: 'rect', coords: [0, 0, 10] }); // $ExpectError
|
|
marker.setShape({ type: 'rect', coords: [0, 0, 10, 10] });
|
|
marker.setShape({ type: 'rect', coords: [0, 0, 10, 10, 10] }); // $ExpectError
|
|
marker.setShape({ type: 'poly' }); // $ExpectError
|
|
marker.setShape({ type: 'poly', coords: [0] }); // $ExpectError
|
|
marker.setShape({ type: 'poly', coords: [0, 0] }); // $ExpectError
|
|
marker.setShape({ type: 'poly', coords: [0, 0, 10] }); // $ExpectError
|
|
marker.setShape({ type: 'poly', coords: [0, 0, 10, 10] });
|
|
marker.setShape({ type: 'poly', coords: [0, 0, 10, 10, 10] });
|
|
marker.setShape({ type: 'poly', coords: [0, 0, 10, 10, 10, 10] });
|
|
marker.setShape({ type: 'test' }); // $ExpectError
|
|
marker.setShape({ type: 'test', coords: [0] }); // $ExpectError
|
|
marker.setShape({ type: 'test', coords: [0, 0] }); // $ExpectError
|
|
marker.setShape({ type: 'test', coords: [0, 0, 0] }); // $ExpectError
|
|
marker.setShape({ type: 'test', coords: [0, 0, 0, 0] }); // $ExpectError
|
|
marker.setShape({}); // $ExpectError
|
|
marker.setShape(null);
|
|
|
|
marker.setTitle('test');
|
|
marker.setTitle(null);
|
|
|
|
marker.setVisible(true);
|
|
|
|
marker.setZIndex(0);
|
|
marker.setZIndex(null);
|
|
|
|
// Marker events
|
|
|
|
marker.addListener('animation_changed', () => {});
|
|
|
|
marker.addListener('animation_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('click', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('clickable_changed', () => {});
|
|
|
|
marker.addListener('clickable_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('cursor_changed', () => {});
|
|
|
|
marker.addListener('cursor_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('dblclick', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('drag', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('dragend', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('draggable_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('dragstart', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('flat_changed', () => {});
|
|
|
|
marker.addListener('flat_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('icon_changed', () => {});
|
|
|
|
marker.addListener('icon_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('mousedown', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('mouseout', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('mouseover', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('mouseup', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('position_changed', () => {});
|
|
|
|
marker.addListener('position_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('rightclick', event => {
|
|
event; // $ExpectType MouseEvent
|
|
});
|
|
|
|
marker.addListener('shape_changed', () => {});
|
|
|
|
marker.addListener('shape_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('title_changed', () => {});
|
|
|
|
marker.addListener('title_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('visible_changed', () => {});
|
|
|
|
marker.addListener('visible_changed', event => {}); // $ExpectError
|
|
|
|
marker.addListener('zindex_changed', () => {});
|
|
|
|
marker.addListener('zindex_changed', event => {}); // $ExpectError
|
|
|
|
/***** OverlayView *****/
|
|
// https://developers.google.com/maps/documentation/javascript/customoverlays
|
|
let div = document.createElement('div');
|
|
class Overlay extends google.maps.OverlayView {
|
|
draw(): void {
|
|
const panes = this.getPanes();
|
|
panes.floatPane.appendChild(div);
|
|
panes.mapPane.appendChild(div);
|
|
panes.markerLayer.appendChild(div);
|
|
panes.overlayLayer.appendChild(div);
|
|
panes.overlayMouseTarget.appendChild(div);
|
|
}
|
|
}
|
|
let overlay = new Overlay();
|
|
overlay.setMap(map);
|
|
|
|
/***** Rectangles *****/
|
|
// https://developers.google.com/maps/documentation/javascript/examples/rectangle-simple
|
|
let rectangle = new google.maps.Rectangle({
|
|
strokeColor: '#FF0000',
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: '#FF0000',
|
|
fillOpacity: 0.35,
|
|
map,
|
|
bounds: {
|
|
north: 33.685,
|
|
south: 33.671,
|
|
east: -116.234,
|
|
west: -116.251,
|
|
},
|
|
});
|
|
|
|
/***** Circles *****/
|
|
// circleOptions with LatLng center
|
|
let circle1 = new google.maps.Circle({
|
|
center: new google.maps.LatLng(59.327, 18.067),
|
|
radius: 20,
|
|
fillColor: '#FF0000',
|
|
strokeColor: '#FF0000',
|
|
fillOpacity: 0.35,
|
|
strokeOpacity: 0.5,
|
|
strokeWeight: 1,
|
|
});
|
|
|
|
// circleOptions with LatLngLiteral center
|
|
let circle2 = new google.maps.Circle({
|
|
center: { lat: 59.327, lng: 18.067 },
|
|
radius: 20,
|
|
fillColor: '#FF0000',
|
|
strokeColor: '#FF0000',
|
|
fillOpacity: 0.35,
|
|
strokeOpacity: 0.5,
|
|
strokeWeight: 1,
|
|
});
|
|
|
|
/***** StreetViewPanorama *****/
|
|
let panoramaOptions: google.maps.StreetViewPanoramaOptions = {
|
|
zoom: 0,
|
|
pano: 'reception',
|
|
scrollwheel: false,
|
|
mode: 'webgl',
|
|
disableDefaultUI: true,
|
|
linksControl: true,
|
|
visible: true,
|
|
motionTracking: true,
|
|
motionTrackingControl: true,
|
|
};
|
|
let panorama = new google.maps.StreetViewPanorama(document.createElement('div'), panoramaOptions);
|
|
|
|
// MVCObject method on StreetViewPanorama
|
|
let panoramaEvent = panorama.addListener('pano_changed', () => {});
|
|
|
|
/***** StreetViewService *****/
|
|
let street_view_service = new google.maps.StreetViewService();
|
|
street_view_service.getPanorama(
|
|
{
|
|
location: new google.maps.LatLng(37.782551, -122.445368),
|
|
radius: 50,
|
|
},
|
|
(data, status) => {
|
|
if (status === google.maps.StreetViewStatus.OK) {
|
|
const location_pano = data == null || data.location == null ? null : data.location.pano;
|
|
if (location_pano == null) {
|
|
// Not good
|
|
return;
|
|
}
|
|
|
|
const new_panorama = new google.maps.StreetViewPanorama(document.createElement('div'), panoramaOptions);
|
|
new_panorama.setPano(location_pano);
|
|
new_panorama.setPov({
|
|
heading: 0,
|
|
pitch: 0,
|
|
});
|
|
}
|
|
},
|
|
);
|
|
|
|
/***** MVCArray *****/
|
|
|
|
// MVCArray should be generic
|
|
let mvcArrayStr = new google.maps.MVCArray<string>(['a', 'b', 'c']);
|
|
mvcArrayStr.forEach((elem: string, i: number): void => {
|
|
elem.toUpperCase();
|
|
});
|
|
mvcArrayStr.getArray()[0].toUpperCase();
|
|
mvcArrayStr.getAt(0).toUpperCase();
|
|
mvcArrayStr.insertAt(2, 'x');
|
|
mvcArrayStr.pop().toUpperCase();
|
|
mvcArrayStr.push('y');
|
|
mvcArrayStr.removeAt(0).toUpperCase();
|
|
mvcArrayStr.setAt(0, 'z');
|
|
|
|
/***** HeatMaps *****/
|
|
|
|
let heatmap = new google.maps.visualization.HeatmapLayer({
|
|
data: [
|
|
new google.maps.LatLng(37.782551, -122.445368),
|
|
new google.maps.LatLng(37.782745, -122.444586),
|
|
new google.maps.LatLng({ lat: 37.782842, lng: -122.443688 }),
|
|
],
|
|
map,
|
|
});
|
|
|
|
// setData Should Accept MVCArray<LatLng>
|
|
heatmap.setData(
|
|
new google.maps.MVCArray<google.maps.LatLng>([
|
|
new google.maps.LatLng(37.782551, -122.445368),
|
|
new google.maps.LatLng(37.782745, -122.444586),
|
|
new google.maps.LatLng({ lat: 37.782842, lng: -122.443688 }),
|
|
]),
|
|
);
|
|
|
|
// setData Should Accept MVCArray<WeightedLocation>
|
|
heatmap.setData(
|
|
new google.maps.MVCArray<google.maps.visualization.WeightedLocation>([
|
|
{ weight: 1, location: new google.maps.LatLng(37.782551, -122.445368) },
|
|
{ weight: 2, location: new google.maps.LatLng(37.782745, -122.444586) },
|
|
{ weight: 3, location: new google.maps.LatLng({ lat: 37.782842, lng: -122.443688 }) },
|
|
]),
|
|
);
|
|
|
|
// setData Should Accept LatLng[]
|
|
heatmap.setData([
|
|
new google.maps.LatLng(37.782551, -122.445368),
|
|
new google.maps.LatLng(37.782745, -122.444586),
|
|
new google.maps.LatLng({ lat: 37.782842, lng: -122.443688 }),
|
|
]);
|
|
|
|
// setData Should Accept WeightedLocation[]
|
|
heatmap.setData([
|
|
{ weight: 1, location: new google.maps.LatLng(37.782551, -122.445368) },
|
|
{ weight: 2, location: new google.maps.LatLng({ lat: 37.782745, lng: -122.444586 }) },
|
|
]);
|
|
|
|
// setOptions should required data and accepted any HeatmapLayerOptions
|
|
heatmap.setOptions({
|
|
data: [
|
|
new google.maps.LatLng(37.782551, -122.445368),
|
|
new google.maps.LatLng(37.782745, -122.444586),
|
|
new google.maps.LatLng({ lat: 37.782842, lng: -122.443688 }),
|
|
],
|
|
dissipating: true,
|
|
map,
|
|
opacity: 8,
|
|
});
|
|
|
|
/***** google.maps.places.PlacesService *****/
|
|
let service = new google.maps.places.PlacesService(new HTMLDivElement());
|
|
|
|
service.getDetails(
|
|
{
|
|
placeId: '-a1',
|
|
fields: ['name'],
|
|
sessionToken: new google.maps.places.AutocompleteSessionToken(),
|
|
},
|
|
(result, status) => {
|
|
if (status === google.maps.places.PlacesServiceStatus.NOT_FOUND) {
|
|
return;
|
|
}
|
|
|
|
result.name; // $ExpectType string
|
|
},
|
|
);
|
|
|
|
service.findPlaceFromQuery(
|
|
{
|
|
query: 'Big Ben London',
|
|
fields: ['name'],
|
|
},
|
|
(results, status) => {
|
|
if (status === google.maps.places.PlacesServiceStatus.ERROR) {
|
|
return;
|
|
}
|
|
|
|
results[0].name; // $ExpectType string
|
|
},
|
|
);
|
|
|
|
service.findPlaceFromPhoneNumber(
|
|
{
|
|
phoneNumber: '123456',
|
|
fields: ['name'],
|
|
},
|
|
(results, status) => {
|
|
if (status === google.maps.places.PlacesServiceStatus.ERROR) {
|
|
return;
|
|
}
|
|
|
|
results[0].name; // $ExpectType string
|
|
},
|
|
);
|
|
|
|
/***** google.maps.places.Autocomplete *****/
|
|
const autocomplete = new google.maps.places.Autocomplete(document.createElement('input'));
|
|
const placeResult = autocomplete.getPlace();
|
|
placeResult.name; // $ExpectType string
|
|
|
|
/***** google.maps.ImageMapType *****/
|
|
const imageMapType = new google.maps.ImageMapType({
|
|
alt: 'alt',
|
|
getTileUrl: (tileCoord: google.maps.Point, zoom: number) => 'string',
|
|
maxZoom: 20,
|
|
minZoom: 10,
|
|
name: 'name',
|
|
opacity: 0.5,
|
|
tileSize: new google.maps.Size(256, 256),
|
|
});
|
|
imageMapType.alt; // $ExpectType string
|
|
imageMapType.maxZoom; // $ExpectType number
|
|
imageMapType.minZoom; // $ExpectType number
|
|
imageMapType.name; // $ExpectType string
|
|
imageMapType.projection; // $ExpectType Projection
|
|
imageMapType.radius; // $ExpectType number
|
|
imageMapType.tileSize; // $ExpectType Size
|
|
|
|
/***** google.maps.StyledMapType *****/
|
|
const styledMapType = new google.maps.StyledMapType([], {
|
|
alt: 'alt',
|
|
maxZoom: 20,
|
|
minZoom: 10,
|
|
name: 'name',
|
|
});
|
|
styledMapType.alt; // $ExpectType string
|
|
styledMapType.maxZoom; // $ExpectType number
|
|
styledMapType.minZoom; // $ExpectType number
|
|
styledMapType.name; // $ExpectType string
|
|
styledMapType.projection; // $ExpectType Projection
|
|
styledMapType.radius; // $ExpectType number
|
|
styledMapType.tileSize; // $ExpectType Size
|
|
|
|
const directionsWaypointEmpty: google.maps.DirectionsWaypoint = {};
|
|
const directionsWaypointLocationString: google.maps.DirectionsWaypoint = {
|
|
location: '',
|
|
};
|
|
const directionsWaypointLocationLatLng: google.maps.DirectionsWaypoint = {
|
|
location: new google.maps.LatLng(0, 0),
|
|
};
|
|
const directionsWaypointLocationPlace: google.maps.DirectionsWaypoint = {
|
|
location: { query: '' },
|
|
};
|
|
const directionsWaypointStopover: google.maps.DirectionsWaypoint = {
|
|
stopover: true,
|
|
};
|
|
|
|
/***** google.maps.DirectionsService *****/
|
|
let directionsService = new google.maps.DirectionsService();
|
|
|
|
directionsService.route({
|
|
avoidFerries: true,
|
|
avoidHighways: true,
|
|
avoidTolls: true,
|
|
destination: 'destination',
|
|
origin: 'origin',
|
|
provideRouteAlternatives: true,
|
|
transitOptions: {
|
|
arrivalTime: new Date(),
|
|
departureTime: new Date(),
|
|
modes: [
|
|
google.maps.TransitMode.BUS,
|
|
google.maps.TransitMode.RAIL
|
|
],
|
|
routingPreference: google.maps.TransitRoutePreference.FEWER_TRANSFERS
|
|
},
|
|
travelMode: google.maps.TravelMode.TRANSIT,
|
|
unitSystem: google.maps.UnitSystem.IMPERIAL
|
|
}, (result: google.maps.DirectionsResult, status: google.maps.DirectionsStatus) => {
|
|
const routes = result.routes; // $ExpectType DirectionsRoute[]
|
|
const legs = routes[0].legs; // $ExpectType DirectionsLeg[]
|
|
const steps = legs[0].steps; // $ExpectType DirectionsStep[]
|
|
steps[0].steps; // $ExpectType BaseDirectionsStep[]
|
|
});
|