How to highlight google map circle on div hover in angular 2

Question

I am working on angular 2 application and implementing angular2-google-maps. My requirement is that I want to highlight border circle radius in google map on hover a div.

I am sharing a reference http://www.geocodezip.com/v3_MW_example_hoverchange.html. In this, the placemarker color is changing on hover. But I want to highlight border radius cirlce on hover.

Is there any way to implement this in angular 2?

Here is my example code:-

app.component.ts

import { Component } from '@angular/core';
import { marker } from './marker.interface';
declare var $ : any;
import {
   MapsAPILoader,
   SebmGoogleMapMarker,

} from 'angular2-google-maps/core';


 @Component({
   moduleId: module.id,
   selector: 'my-app',
   styles: [`
    .sebm-google-map-container {
     height: 500px;
  }
 `],
   templateUrl: './map.component.html'
 })
 export class AppComponent  { 
   circledisplay:boolean=true;
   zoom: number =10;
   // initial center position for the map
   lat: number = 51.673858;
   lng: number = 7.815982;


 markerDragEnd(m: marker, $event: MouseEvent) {
   console.log('dragEnd', m, $event);
 }

 markers: marker[] = [
  {
      lat: 51.673858,
      lng: 7.815982,
      label: 'A',
      draggable: true,
  range:5000
  },
  {
      lat: 51.373858,
      lng: 7.215982,
      label: 'B',
      draggable: false,
  range:3000
  },
  {
      lat: 51.723858,
      lng: 7.895982,
      label: 'C',
      draggable: true,
     range:7000
   }
 ]


}

map.component.html

<sebm-google-map 
  [latitude]="lat"
  [longitude]="lng"
  [zoom]="zoom"
  [disableDefaultUI]="false"
  [zoomControl]="false"
 >

  <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">

    <sebm-google-map-info-window [isOpen]="true"  [disableAutoPan]="false">
      <strong>{{m.label}}</strong>
    </sebm-google-map-info-window>
        <sebm-google-map-circle [visible]="circledisplay" id="text{{i}}" [latitude]="m.lat" [longitude]="m.lng" 
        [radius]="m.range"
        [fillColor]="'red'"
        [circleDraggable]="false"
        [editable]="false">
    </sebm-google-map-circle>
  </sebm-google-map-marker>



   </sebm-google-map>
 <div id="SebmGoogleMapMarker-0">Marker 1</div>
 <div id="SebmGoogleMapMarker-1">Marker 2</div>
 <div id="SebmGoogleMapMarker-2">Marker 3</div>

Answer 1

At first you need a marker reference in your component like this:

export class MapComponent {
    ...
    markers:Marker[] = [];
    ...

and two function for mouseOver and mouseOut event handling:

    circleOut(marker) {
      marker.fillColor = "#EC407A";
    }

    circleOver(marker) {
      marker.fillColor = "#ff0057";
    }
}

In this case my marker object looks like this:

export class Marker {
    constructor(public latitude:number,
            public longitude:number,
            public fillColor:string,
            public fillOpacity:number,
            public radius:number,
            public zIndex:number,
            public strokeColor:string,
            public strokeOpacity:number,
            public strokeWeight:number
           ) {
    }
}

The template looks like this:

<sebm-google-map-circle
        *ngFor="let marker of markers"
        (mouseOut)="circleOut(marker)"
        (mouseOver)="circleOver(marker)"
        [latitude]="marker.latitude"
        [longitude]="marker.longitude"
        [fillColor]="marker.fillColor"
        [fillOpacity]="marker.fillOpacity"
        [radius]="marker.radius"
        [zIndex]="marker.zIndex"
        [strokeColor]="marker.strokeColor"
        [strokeOpacity]="marker.strokeOpacity"
        [strokeWeight]="marker.strokeWeight"
        [strokePosition]="marker.strokePosition">
</sebm-google-map-circle>

...

<div *ngFor="let marker of markers"
        (mouseleave)="circleOut(marker)"
        (mouseenter)="circleOver(marker)">marker</div>

So you can see the magic are in these two blocks:

*ngFor="let marker of markers"
        (mouseOut)="circleOut(marker)"
        (mouseOver)="circleOver(marker)"

 <div *ngFor="let marker of markers"
        (mouseleave)="circleOut(marker)"
        (mouseenter)="circleOver(marker)">marker</div>

I catch the mouseOut and mouseOver events and trigger a function with the marker reference as parameter. So you can change the properties of the marker representation and the view will be updated automatically.

Happy Coding!