Skip to content

Instantly share code, notes, and snippets.

@ptaylor

ptaylor/index.html

Last active October 15, 2018 10:56
Show Gist options
  • Save ptaylor/a6c178160d9dc03f1872af5967118fc9 to your computer and use it in GitHub Desktop.
Save ptaylor/a6c178160d9dc03f1872af5967118fc9 to your computer and use it in GitHub Desktop.
Download ZIP
Angular google maps with a list of markers
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<base href="/">
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Raw
map-marker.ts
export class MapMarker {
latitude: number;
longitude: number;
title: string;
text: string;
}
Raw
map.component.ts
import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import { } from '@types/googlemaps';
import {MapMarker} from './map-marker';
@Component({
selector: 'app-map',
template: '<div #appMap id="map"></div>',
styles: ['#map {height: 80vh;}']
})
export class MapComponent implements OnInit {
@Input()
markers: Array<MapMarker>;
@ViewChild('appMap') mapElement: ElementRef;
constructor() {}
ngOnInit() {
// Find average "center" location
let latitude = 0.0;
let longitude = 0.0;
this.markers.forEach(
marker => {
latitude += marker.latitude;
longitude += marker.longitude;
}
)
latitude = latitude / this.markers.length;
longitude = longitude / this.markers.length;
console.log(`MapComponent.ngInit center - latitude: ${latitude}, longitude: ${longitude}`);
let mapProp = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
};
let mapBounds = new google.maps.LatLngBounds();
let googleMap = new google.maps.Map(this.mapElement.nativeElement, mapProp);
this.markers.forEach(
(marker) => {
console.log(`MapComponent.ngInit adding marker - title: ${marker.title}, latitude ${marker.latitude}, longitude: ${marker.longitude}`);
let googleMapMarker = new google.maps.Marker(
{
position: new google.maps.LatLng(marker.latitude, marker.longitude),
title: marker.title
}
);
googleMapMarker.setMap(googleMap);
mapBounds.extend(googleMapMarker.getPosition());
google.maps.event.addListener(googleMapMarker, 'click', (function(marker, contentString, infowindow) {
return function() {
infowindow.setContent(contentString);
infowindow.open(googleMap, marker);
}
})(googleMapMarker, marker.text, new google.maps.InfoWindow()));
}
);
if (this.markers.length > 1) {
googleMap.fitBounds(mapBounds);
}
}
}
@ptaylor
Copy link
Author

ptaylor commented Oct 15, 2018

Usage:

Component Template:

  <app-map [markers]="markers"></app-map>

Component Class

    ...
    export class LocationComponentimplements OnInit {

        markers: Array<MapMarker>;


        ngOnInit() {

            let item = .....

            this.markers = [
              {
                latitude: parseFloat(item.latitude),
                longitude: parseFloat(item.longitude),
                title: item.name,
                text: `<h3>${item.name}</h3><p>More details .....</p>`
              }
            ];
         }
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment