Third-Party Tools - Maps | Crossroads Digital Design Kit

Third-Party Tools

Maps

We use angular2-google-maps to work with map-based features.

Here is a basic example of a simple map with a set of markers, each with its own info window.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AgmCoreModule } from 'angular2-google-maps/core';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyArKsBK97N0Wi-69x10OL7Sx57Fwlmu6Cs'
    })
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}
import { Component } from '@angular/core';

import { mapOptions } from './map-options';
import { mapMarkers } from './map-markers';

@Component({
  selector: 'app-root',
  styles: [`
    .sebm-google-map-container {
       height: 300px;
     }
  `],
  templateUrl: './app.component.html'
})
export class AppComponent {

  public options = mapOptions;
  public markers = mapMarkers;

}
export const mapOptions = {
  zoom: 8,
  lat: 39.159398,
  lng: -84.423367,
  disableDefaultUi: false,
  zoomControl: true,
  streetViewControl: false,
  scrollwheel: false,
  styles: [
    {
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#f5f5f5'
        }
      ]
    },
    {
      'elementType': 'labels.icon',
      'stylers': [
        {
          'visibility': 'off'
        }
      ]
    },
    {
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#616161'
        }
      ]
    },
    {
      'elementType': 'labels.text.stroke',
      'stylers': [
        {
          'color': '#f5f5f5'
        }
      ]
    },
    {
      'featureType': 'administrative.land_parcel',
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#bdbdbd'
        }
      ]
    },
    {
      'featureType': 'administrative.province',
      'elementType': 'geometry.stroke',
      'stylers': [
        {
          'color': '#979797'
        },
        {
          'weight': 1
        }
      ]
    },
    {
      'featureType': 'poi',
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#eeeeee'
        }
      ]
    },
    {
      'featureType': 'poi',
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#757575'
        }
      ]
    },
    {
      'featureType': 'poi.park',
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#e5e5e5'
        }
      ]
    },
    {
      'featureType': 'poi.park',
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#9e9e9e'
        }
      ]
    },
    {
      'featureType': 'road',
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#ffffff'
        }
      ]
    },
    {
      'featureType': 'road.arterial',
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#757575'
        }
      ]
    },
    {
      'featureType': 'road.highway',
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#dadada'
        }
      ]
    },
    {
      'featureType': 'road.highway',
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#616161'
        }
      ]
    },
    {
      'featureType': 'road.local',
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#9e9e9e'
        }
      ]
    },
    {
      'featureType': 'transit.line',
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#e5e5e5'
        }
      ]
    },
    {
      'featureType': 'transit.station',
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#eeeeee'
        }
      ]
    },
    {
      'featureType': 'water',
      'elementType': 'geometry',
      'stylers': [
        {
          'color': '#c9c9c9'
        }
      ]
    },
    {
      'featureType': 'water',
      'elementType': 'labels.text.fill',
      'stylers': [
        {
          'color': '#9e9e9e'
        }
      ]
    }
  ]
};
import { mapOptions } from './map-options';

export const mapMarkers: Array<any> = [
  {
    name: 'Marker A',
    description: 'Lorem ipsum dolor sit amet.',
    lat: mapOptions.lat + 0.3,
    lng: mapOptions.lng + 0.3,
    iconUrl: '//crds-cms-uploads.s3.amazonaws.com/connect/PERSON.svg'
  },
  {
    name: 'Marker B',
    description: 'Lorem ipsum dolor sit amet.',
    lat: mapOptions.lat - 0.3,
    lng: mapOptions.lng - 0.3,
    iconUrl: '//crds-cms-uploads.s3.amazonaws.com/connect/GATHERING.svg'
  },
  {
    name: 'Marker C',
    description: 'Lorem ipsum dolor sit amet.',
    lat: mapOptions.lat - 0.45,
    lng: mapOptions.lng - 0.45,
    iconUrl: '//crds-cms-uploads.s3.amazonaws.com/connect/SITE.svg'
  },
  {
    name: 'Marker D',
    description: 'Lorem ipsum dolor sit amet.',
    lat: mapOptions.lat + 0.15,
    lng: mapOptions.lng - 0.25,
    iconUrl: '//crds-cms-uploads.s3.amazonaws.com/connect/ME.svg'
  }
];
<sebm-google-map
  [latitude]="options.lat"
  [longitude]="options.lng"
  [zoom]="options.zoom"
  [disableDefaultUI]="options.disableDefaultUI"
  [streetViewControl]="options.streetViewControl"
  [scrollwheel]="options.scrollwheel"
  [styles]="options.styles"
  [zoomControl]="options.zoomControl">

  <sebm-google-map-marker
      *ngFor="let marker of markers; let i = index"
      [latitude]="marker.lat"
      [longitude]="marker.lng"
      [iconUrl]="marker.iconUrl">

    <sebm-google-map-info-window>
      <strong>{{ marker.name }}</strong>
      <p>{{ marker.description }}</p>
    </sebm-google-map-info-window>

  </sebm-google-map-marker>

</sebm-google-map>

Labels

We also support styles for on-map labels next to markers using the .pin-details selector. Unfortunately, this functionality is not currently built into angular2-google-maps. An example of one solution to achieve this effect can be found in this component.

Keanu R