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>
{{ marker.description }}
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.