-
-
Save dcyoung-dev/a995c15a9a49fd5a4853d0e61d6a156e to your computer and use it in GitHub Desktop.
Simple Google Map Integration with Angular.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="map"> | |
<h4>From map</h4> | |
</div> | |
<div id="loc_details"> | |
<h4>Current Location</h4> | |
<p> | |
Lat : {{geoLoc.lat }} | |
</p> | |
<p> | |
Long : {{geoLoc.lng}} | |
</p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { MapService } from './services/gmap.service'; | |
@Component({ | |
selector: 'app-root', | |
templateUrl: './app.component.html', | |
styleUrls: ['./app.component.css'], | |
providers: [ | |
MapService | |
], | |
}) | |
export class AppComponent { | |
title = 'nggmaps'; | |
geoLoc = { lat: 22.428912, lng: 79.394400 }; | |
constructor(private mapService: MapService) { | |
}; | |
ngOnInit() { | |
this._loadMapScript(); | |
} | |
_loadMapScript() { | |
this.mapService.load('googlemaps').then(() => { | |
this._initializeMap(); | |
}).catch(error => { console.log(error); console.log('Inside err') }); | |
} | |
_initializeMap() { | |
let w: any = window; | |
let gmap = w.google.maps; | |
let map; | |
let location = this.geoLoc; | |
map = new gmap.Map(document.getElementById("map"), { | |
center: location, | |
zoom: 6, | |
mapTypeControl: false, | |
fullscreenControl: false, | |
mapTypeId: 'roadmap', | |
styles: [ | |
{ | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#242f3e" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#746855" | |
} | |
] | |
}, | |
{ | |
"elementType": "labels.text.stroke", | |
"stylers": [ | |
{ | |
"color": "#242f3e" | |
} | |
] | |
}, | |
{ | |
"featureType": "administrative.locality", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#d59563" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#d59563" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi.park", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#263c3f" | |
} | |
] | |
}, | |
{ | |
"featureType": "poi.park", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#6b9a76" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#38414e" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"elementType": "geometry.stroke", | |
"stylers": [ | |
{ | |
"color": "#212a37" | |
} | |
] | |
}, | |
{ | |
"featureType": "road", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#9ca5b3" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.highway", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#746855" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.highway", | |
"elementType": "geometry.stroke", | |
"stylers": [ | |
{ | |
"color": "#1f2835" | |
} | |
] | |
}, | |
{ | |
"featureType": "road.highway", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#f3d19c" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#2f3948" | |
} | |
] | |
}, | |
{ | |
"featureType": "transit.station", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#d59563" | |
} | |
] | |
}, | |
{ | |
"featureType": "water", | |
"elementType": "geometry", | |
"stylers": [ | |
{ | |
"color": "#17263c" | |
} | |
] | |
}, | |
{ | |
"featureType": "water", | |
"elementType": "labels.text.fill", | |
"stylers": [ | |
{ | |
"color": "#515c6d" | |
} | |
] | |
}, | |
{ | |
"featureType": "water", | |
"elementType": "labels.text.stroke", | |
"stylers": [ | |
{ | |
"color": "#17263c" | |
} | |
] | |
} | |
] | |
}); | |
var marker = new gmap.Marker({ position: location, map: map }); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
interface Scripts { | |
name: string, | |
src: string | |
} | |
export const Scriptsrc: Scripts[] = [ | |
{ name: 'googlemaps', src: 'https://maps.googleapis.com/maps/api/js?key=<YOUR_GOOGLE_MAP_KEY_GOES_HERE>' } | |
] | |
declare var document: any; | |
@Injectable() | |
export class MapService { | |
private Scripts: any = {}; | |
constructor() { | |
Scriptsrc.forEach((script: any) => { | |
this.Scripts[script.name] = { | |
loaded: false, | |
src: script.src | |
}; | |
}); | |
} | |
load(...Scripts: string[]) { | |
const promises: any[] = []; | |
Scripts.forEach((script) => promises.push(this.loadScript(script))); | |
return Promise.all(promises); | |
} | |
loadScript(name: string) { | |
return new Promise((resolve, reject) => { | |
if (!this.Scripts[name].loaded) { | |
let script = document.createElement('script'); | |
script.type = 'text/javascript'; | |
script.src = this.Scripts[name].src; | |
if (script.readyState) { | |
script.onreadystatechange = () => { | |
if (script.readyState === "loaded" || script.readyState === "complete") { | |
script.onreadystatechange = null; | |
this.Scripts[name].loaded = true; | |
resolve({ script: name, loaded: true, status: 'Loaded' }); | |
} | |
}; | |
} else { | |
script.onload = () => { | |
this.Scripts[name].loaded = true; | |
resolve({ script: name, loaded: true, status: 'Loaded' }); | |
}; | |
} | |
script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' }); | |
document.getElementsByTagName('head')[0].appendChild(script); | |
} else { | |
resolve({ script: name, loaded: true, status: 'Already Loaded' }); | |
} | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment