Marker on click show alert ionic 4 googlemap angular

  private addMaker(lat: number, lng: number) {
    const marker = new google.maps.Marker({
      position: { lat, lng },
      map: this.mapRef,
      title: 'test',
      icon: { url: "../assets/icon/car.png",
      scaledSize: new google.maps.Size(35, 35) },   
      }) 

    //Marker + infowindow + alert[quote="AhmadAlMunajjed, post:1, topic:159682, full:true"]
What is the difference between the two types of ionic 4 project: angular and ionic-angular?
[/quote]


    var contentString = "Click me!";
    var infowindow = new google.maps.InfoWindow({
      content: contentString
       });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(Map,marker);

      // show alert don't work !!!
      this.presentAlert();
      }
     );
   

 

  }
  

First of all, you should execute all related functions to google maps, if it’s fully loaded to prevent unwanted behaviors or something like that. How to do this?

google.maps.event.addListenerOnce(yourMap, 'idle', () => {

	// Maybe hide loading spinner or something else?

	// Initialize "core" functionality of your module.
	return;
});

The same you should do with your “infoWindow”, which will be displayed with some informations, something like this:

import { NgZone } from '@angular/core';

constructor(
	private ngZone: NgZone
) {}

[...]

// Create a new infoWindow
let yourInfoWindow: any = new google.maps.InfoWindow();

google.maps.event.addListener(yourInfoWindow, 'domready', () => {

	// Select your infoWindow with `ViewChild` or simply for this example with the documents `querySelector` and add a click listener to it (You can do the same with your marker)
	document.querySelector('#info-content').addEventListener('click', () => {

		// Important here, run your code with `ngZone`, otherwise it would not work like in your case!
		this.ngZone.run(() => {

			// Present your alert
			this.presentAlert();
			return;
		});

	}, false);

});

See also here: https://developers.google.com/maps/documentation/javascript/reference/#InfoWindow

Hope it helps!

Cheers
Unkn0wn0x

no it doesn’t work with this code :frowning: … , i trade ather method but the problem is the alert is show that before i click the mark

  private addMaker(lat: number, lng: number) {
    const marker = new google.maps.Marker({
      position: { lat, lng },
      map: this.mapRef,
      title: 'taxi',
      icon: { url: "../assets/icon/car.png",
      scaledSize: new google.maps.Size(35, 35) },   
      }) 
    //Marker + infowindow + angularjs compiled ng-click
    
    let contentString = this.presentAlert();
    var infowindow = new google.maps.InfoWindow({
      content: HTMLIonAlertControllerElement
  
       });
    
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(Map,marker);
      console.log("Click me!");
      this.verif=true;
      console.log(this.verif) 
      
    }
     );
    
    
  }

I don’t know how to show the alert only when I click on the mark
this i my packaage.json

{
  "name": "taxi",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/fire": "^5.1.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/background-geolocation": "^5.4.0",
    "@ionic-native/camera": "^5.3.0",
    "@ionic-native/core": "^5.4.0",
    "@ionic-native/geolocation": "^5.4.0",
    "@ionic-native/google-maps": "^5.0.0-beta.27",
    "@ionic-native/in-app-browser": "^5.3.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "@ionic/storage": "^2.2.0",
    "angularfire2": "^5.1.2",
    "cordova-android": "8.0.0",
    "cordova-browser": "6.0.0",
    "cordova-plugin-camera": "4.0.3",
    "cordova-plugin-geolocation": "4.0.1",
    "cordova-plugin-googlemaps": "2.5.3",
    "cordova-plugin-inappbrowser": "3.0.0",
    "core-js": "^2.5.4",
    "firebase": "^5.9.3",
    "ionic-native": "^2.9.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.3.1",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~10.14.2",
    "codelyzer": "~4.5.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-geolocation": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }
}

it work now hahaha

 private addMaker(lat: number, lng: number) {
    const marker = new google.maps.Marker({
      position: { lat, lng },
      map: this.mapRef,
      title: 'taxi',
      icon: { url: "../assets/icon/car.png",
      scaledSize: new google.maps.Size(35, 35) },   
      })

    // i show the alert on mark click yeeeeees <3
    let self = this
      marker.addListener('click', function() {
        console.log("test");
        self.presentAlert()
      });
    
  }