MarkerIcon interface
April 11, 2018 · View on GitHub
[usage 1]SimpleIcon
let icon: MarkerIcon = {
url: 'assets/google_tokyo_icon.png',
size: {
width: 32,
height: 24
}
};
this.map.addMarker({
'position': {lat: ..., lng: ...},
'icon': icon
}).then((marker: Marker) => {
});
![]()
[usage 2]Color Icon
this.map.addMarker({
'position': {lat: ..., lng: ...},
'icon': 'blue'
}).then((marker: Marker) => {
});
![]()
[usage 3]Base64 Encoded Icon
let icon: string = "data:image/png;base64,iVBORw0KGgo...CC";
let canvas: any = document.createElement('canvas');
canvas.width = 120;
canvas.height = 40;
let context: any = canvas.getContext('2d');
let img: any = new Image();
img.src = "assets/google_logo.gif";
img.onload = () => {
context.drawImage(img, 0, 0);
context.font = '15pt Calibri';
context.fillStyle = 'blue';
context.fillText('Google', 40, 15);
context.fillText('Tokyo!', 60, 35);
this.map.addMarker({
'position': latLng,
'title': canvas.toDataURL(),
'icon': icon
}).then((marker: Marker) => {
marker.showInfoWindow();
});
};
![]()
Interface members
| Params | Type | Details |
|---|---|---|
| url | string | `http`, `https`, `file`, `cdvfile` and `file` protocols are supported. |
| size | { width: number, height: number, } |
(optional) size of the icon image |