I am going to show how to implement custom marker with custom info window into our Ionic 4 application. We are going to need to generate a key from Google in order to use the Google Maps API.

Just follow my previous Part. I have continue with that code.

After getting geo location create the location object.

/*location object*/
const pos = {
lat: this.latitude,
lng: this.longitude
};

Next, set the map center as new location thats getting from geo location.

map.setCenter(pos);

create the custom marker icon using the following code

const icon = {
url: 'assets/icon/u.png', // image url
scaledSize: new google.maps.Size(50, 50), // scaled size
};

Here, i have set the image url and image size.

Create the custom marker using the following code.

const marker = new google.maps.Marker({
position: pos, //marker position
map: map, //map already created
title: 'Hello World!',
icon: icon //custom image
});

Configure info window content

const contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<img src="assets/icon/user.png" width="200">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
'south west of the nearest large town, Alice Springs; 450&#160;km ' +
'(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
'Aboriginal people of the area. It has many springs, waterholes, ' +
'rock caves and ancient paintings. Uluru is listed as a World ' +
'Heritage Site.</p>' +
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
'(last visited June 22, 2009).</p>' +
'</div>' +
'</div>';

Create a info window using the following code

const infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});

Next, add the click event on marker for opening the info window.

marker.addListener('click', function() {
infowindow.open(map, marker);
});

Here is complete code of component class

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation/ngx';
declare var google;

@Component({
selector: 'app-marker',
templateUrl: './marker.page.html',
styleUrls: ['./marker.page.scss'],
})
export class MarkerPage implements OnInit, AfterViewInit {
latitude: any;
longitude: any;
@ViewChild('mapElement') mapNativeElement: ElementRef;
constructor(private geolocation: Geolocation) { }

ngOnInit() {
}

ngAfterViewInit(): void {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitude = resp.coords.latitude;
this.longitude = resp.coords.longitude;
const map = new google.maps.Map(this.mapNativeElement.nativeElement, {
center: {lat: -34.397, lng: 150.644},
zoom: 16
});
/*location object*/
const pos = {
lat: this.latitude,
lng: this.longitude
};
map.setCenter(pos);
const icon = {
url: 'assets/icon/u.png', // image url
scaledSize: new google.maps.Size(50, 50), // scaled size
};
const marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Hello World!',
icon: icon
});
const contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<img src="assets/icon/user.png" width="200">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
'south west of the nearest large town, Alice Springs; 450&#160;km ' +
'(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
'Aboriginal people of the area. It has many springs, waterholes, ' +
'rock caves and ancient paintings. Uluru is listed as a World ' +
'Heritage Site.</p>' +
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
'(last visited June 22, 2009).</p>' +
'</div>' +
'</div>';
const infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}).catch((error) => {
console.log('Error getting location', error);
});
}

}

complete code of template section

<ion-header>
<ion-toolbar>
<ion-title>Custom Marker</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<div #mapElement class="map"></div>
</ion-content>

complete code of module file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MarkerPage } from './marker.page';
import { Geolocation } from '@ionic-native/geolocation/ngx';

const routes: Routes = [
{
path: '',
component: MarkerPage
}
];

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [MarkerPage],
providers: [Geolocation]
})
export class MarkerPageModule {}