Custom Google Maps In Angular Application

ankana likhita sri priya
Jul 18 · 3 min read
Image 1: Click on Google Developers Console.
Image 2: Enter your mail id.
Image 3: Enter your Password.
Image 4: Google Developer Console opens.
Image 5: Select API at Google Maps field.
Image 6: Select your API.
Image 7: Enable the API.
Image 8: Click on API Manager.
Image 9: Create Credentials.
Image 10: Select API key.
Image 11: Your API key is created.
Image 12: Copy your API key.
Image 13: Paste your API Key here.
npm install @agm/core
Image 15: Google maps is accessed.
markers = [ ];
async imagefadeout(){
console.log("Test Length>>>>"+this.markers.length)
for (var i = 0, len = this.markers.length; i < len; i++) {
console.log("Test Exception....",this.markers[i]);
if(this.markers[i] != undefined && !this.markers[i]['newone']){
console.log(this.markers[i])
let markerOpacity = this.markers[i]['opacity'];
console.log("markerOpacity>>>>",markerOpacity,"..i..",i);
if (markerOpacity <= 0.2) {
this.markers.splice(i,1);
}
else{
//this.markers[i].setOpacity(markerOpacity-0.05);
this.markers[i]['opacity'] = markerOpacity-0.1;
}
}
}
setTimeout(()=>{

this.imagefadeout();
},300);
}async ngOnInit() {
this.imagefadeout();
newTodo['opacity'] = 1;
newTodo['newone'] = false;
}let tempIndex = 0;
let newcount = 0;
for (var i = 0, len = this.markers.length; i < len; i++) {var markerObj = this.markers[i];
if(markerObj['newone']){
newcount ++;
if(tempIndex ==0){
tempIndex = i;
}
}
}
if(this.markers.length > 0){
this.markers[tempIndex]['newone'] = false;
this.markers.push(newTodo);
}else{
this.markers.push(newTodo);
}

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade