Cómo personalizar características del mapa de Angular Google Maps (agm) en el proyecto del curso Angular 4.

Hola un saludo a toda la comunidad.
Dando continuidad al presente curso de Angular 4 quise retomar algunos comentarios como reto personal y seguir con esta línea de tutoriales básicos introductorios a este gran Framework.

Esta vez quise intentar cambiar el aspecto del actual marcador que ofrece por defecto en los mapas de Google y agregar un color cualquiera. También, quise agregar cerca al marcador un texto que de momento en este Tutoríal lo dejaré estático, o como se conoce tradicionalmente en la jerga de programadores: “código quemado, hardcodeado”; Además de ello, con un color específico.

Me concentraré entonces en estos 3 requerimientos (agregar texto al marcador, agregar color al texto agregado, Cambiar aspecto del icono del marcador). Así que pues a ello! inicio con los pasos 1 y 2 ya que van definidos en el mismo objeto.

NOTA: es importante aclarar que se está modificando un fragmento de código dando seguimiento al curso de Angular 4. Así que evitaré temas de como crear desde cero un proyecto en Angular y la creación de sus componentes, servicios, etc.

1 ). Agregar texto al marcador que hace parte del tag: <agp-map>…</agp-map>

• Actualmente el marcador luce de la siguiente manera:

• Identificar el componente a realizar los cambios y donde sale el mapa de Google maps, en el caso del proyecto del curso, es el fichero: ‘lugares.component.html’ y ‘lugares.component.ts’ respectivamente, en la vista, agregaré unas propiedades las cuales están enlazadas en el fichero Typescript.
  Dichas propiedades es en sí, la definición de un objeto JSON tradicional para quienes vienen de Vanilla JS o Javascript tradicional. Así que
  basta entonces con definir unas propiedades en el fichero Typescript relativo a los lugares: ‘lugares.component.ts’:

// pasos 1 y 2 ya que se define texto y colorexport class LugaresComponent{
  // declaraciones
  labelOptions = {
    color: '#ee4646',
    fontFamily: '',
    fontSize: '10px',
    fontWeight: 'bold',
    letterSpacing:'0.5px',
    text: 'Plan Pagado/No pagado'
  }
  // ... más definiciones y resto del cuerpo del Typescript (constructor y métodos).
}

• Una captura de pantalla de como se vería esto desde el editor de código:

• Una vez que se defina este objeto inicial tendrémos que enlazarlo o ‘Bindearlo’ como se conoce tradicionalmente en la vista HTML (lugares.component.html).
  Una vez tengamos identificado el tag: “<agm-marker>”, agregamos un atributo de ese tag llamado: “[label]”, a dicho atributo se le agrega el nombre del objeto creado previamente en el fichero Typescript. En código sería algo como:</agm-marker>

[latitude]="lat"[longitude]="lng"[zoom]="7">
	 [label]="labelOptions"
			*ngFor="let lugar of lugares"[latitude]="lugar.lat"[longitude]="lugar.lng">

    agm-marker>
  agm-map>

• Hasta acá solo hemos configurado el texto adicional que aparezca en cada marcador del mapa (por cada lugar almacenado en la base de datos de Firebase). Ahora, ¿que tal si cambiamos el marcador por uno cualquiera?:

3 ). Cambiar el aspecto del marcador de Google Maps

• Buscar un icono cualquiera con extensión .ico preferiblemente y que sea de uso libre en internet:

• Una vez que tengamos este icono del marcador que queremos agregar a cada marcador de “Lugares”, subimos a la web dicho recurso me diante una herramienta online de uso libre que permita almacenar imágenes, o si bien cuentan con un hosting personal mucho mejor. En mi caso, subí la imagen a mi webHosting y me copié la URL para acceder a dicha imagen desde el navegador solo por descargar posibles errores (pronto publicaré mi web personal este y más contenido):

• Ahora que estamos aún en el fichero de la vista “lugares.component.html”, vamos a agregar una propiedad que se enlazará con el valor asociado a dicha propiedad pero desde el fichero Typescript, primero vamos con el HTML:

[latitude]="lat"[longitude]="lng"[zoom]="7">
	 [label]="labelOptions"[iconUrl]="iconMap.iconUrl" 
			*ngFor="let lugar of lugares"[latitude]="lugar.lat"[longitude]="lugar.lng">

    agm-marker>
  agm-map>

• Una captura de pantalla indicando el Bindeo que se hace mediante la directiva [iconUrl] y asignando la propiedad “IconUrl” del objeto: “iconMap” solo en el HTML sería:
  

• Ahora tenemos que abrir el fichero Typescript asociado a lugares: “lugares.component.ts” y procedemos a definir este objeto en formato JSON o como más gusten llamarlo:

• Cabe mencionar que el Marcador se verá algo grande dado las dimensiones del fichero “*.ico” descargado para este Turorial. Una solución es reducir el tamaño en algún editor de imágenes como Photoshop u otra herramienta. Y la otra investigar un poco en la documentación sobre una directiva que permita configurar el tamaño de ese icono ya que con las directivas:

[iconAnchorX]="10"[iconAnchorY]="10"[iconHeight]="20"[iconWidth]="20"

Se marca un error como señalo en la siguiente captura de pantalla:

• De momento si guardamos, y tenemos corriendo la aplicación en el servidor local mediante el comando:

ng serve

• El aspecto final tras haber aplicado correctamente los pasos sería como el siguiente (dependiendo el Icono que tengan asignado):

• Modificar y personalizar ciertos elementos asociados a componentes visuales con Angular se convierte en algo fluido y bien estructurado al dividir las responsabilidades.

Como reto a este Tutorial los invito a intentar ajustar el tamaño del Icono asociado al marcador de cada lugar sin tener que reducir el tamaño de dicho Icono desde un editor de imágenes.
Saludos.