Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular-google-maps-agm-complete-guide-html
<div class="form-group">
<input
placeholder="search for location"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
type="text"
class="form-control"
#search
[formControl]="searchControl"
/>
</div>
<agm-map
[latitude]="lat"
[longitude]="lng"
[zoom]="map_zoom"
[disableDefaultUI]="true"
[zoomControl]="true"
(mapClick)="mapClicked($event)"
(centerChange)="centerChange($event)"
(mapReady)="mapReady($event)"
class="map-outer"
>
<!-- imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m" -->
<agm-marker-cluster
class="map-cluster"
[maxZoom]="clulster_max_zoom"
[minimumClusterSize]="minClusterSize"
[styles]="mapOptions.styles"
[calculator]="mapOptions.calculator"
[maxZoom]="6"
>
<agm-marker
*ngFor="let m of markers | async; let i = index"
(markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat"
[iconUrl]="{
url: './assets/images/map-marker.png'
}"
[longitude]="m.lng"
[label]="{
color: 'red',
fontWeight: 'bold',
fontSize: '14px',
fontFamily: 'nunito',
lineHeight: '10px',
text: m.label
}"
[markerDraggable]="false"
(dragEnd)="markerDragEnd(m, $event)"
>
<agm-snazzy-info-window
[isOpen]="isInfoWindowOpen(i)"
[latitude]="m.lat"
[longitude]="m.lng"
[closeWhenOthersOpen]="true"
[closeOnMapClick]="true"
[showCloseButton]="false"
[openOnMarkerClick]="true"
[wrapperClass]="'info-window'"
#infoWindow
>
<ng-template>{{m.event_info}}</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-marker-cluster>
</agm-map>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment