Google Map Native Map_Click Event

Ionic Native
1

hey there i try to add marker on click in my google map cordova plugin.

I tried to translate this into angular 4.0 from the plugin official page!

map.on(plugin.google.maps.event.MAP_CLICK, function(latLng) {
  alert("Map is clicked.\n" + latLng.toUrlValue());
});

    this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe(
            (data) => {
                console.log("Click MAP");
            }
        );

But the console.log doesn’t appear! need the LatLng object too!

Thanks for your help!

1 Like
2

here is the full code of the loadMap function()

    loadMap() {
        let element: HTMLElement = document.getElementById('map');
        this.map = this.googleMaps.create(element);
        this.markers = MarkerMapping.MarkerppingMock;
        // listen to MAP_READY event
        // You must wait for this event to fire before adding something to the map or modifying it in anyway
        this.map.one(GoogleMapsEvent.MAP_READY).then(
            () => {

                this.geoLocation.getCurrentPosition().then((resp) => {
                    let pos: CameraPosition = {
                        target: new LatLng(resp.coords.latitude, resp.coords.longitude),
                        zoom: 12,
                        tilt: 0
                    };
                    this.map.moveCamera(pos);
                });

                this.subscription = this.geoLocation.watchPosition()
                    .filter((p) => p.coords !== undefined) //Filter Out Errors
                    .subscribe(position => {
                        console.log(position.coords.latitude, position.coords.longitude)
                        let userPosition: LatLng = new LatLng(position.coords.latitude, position.coords.longitude);
                        if (this.selfmarker != null && position.coords.latitude != 0 && position.coords.longitude != 0) {
                            this.selfmarker.setPosition(userPosition);
                        } else {
                            let markerIcon = {
                                'url': 'https://lh3.googleusercontent.com/zPPRTrpL-rx7OMIqlYN63z40n2UBJDa3I3n5C3Z9YtKGsTXPfdtks18Y0gdvfcz6tEsV=w170',
                                'size': {
                                    width: 20,
                                    height: 20,
                                }
                            }
                            let markerOptions: MarkerOptions = {
                                position: userPosition,
                                icon: markerIcon
                            };
                            this.map.addMarker(markerOptions).then((marker) => { this.selfmarker = marker; });
                        }
                    });
                for (var marker of this.markers) {
                    this.addMarkerOnMap(marker);
                }

            }
        );
        this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe(
            (data) => {
                console.log("Click MAP");
            }
        );

    }
1 Like
3

I tried another approach after browsing into internet!

<ion-content>
    <div #map id="map" (mapClick)="onMapClick($event)"</div>
</ion-content>

export class PrincipalPage {

@Output()
    mapClick: EventEmitter<any> = new EventEmitter<any>();
    
      onMapClick(e) {
        alert('map was clicked');
      }

I tried this aproach too

        this.map.addEventListener(GoogleMapsEvent.MAP_LONG_CLICK).subscribe(
            (data) => {
                alert("Click MAP");
            }
        );

Unfortunately with no result.

Please really need help!

4

This code worked as I expected.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 GoogleMapOptions,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';

/**
 * Generated class for the MapGetMapPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-map-get-map',
  templateUrl: 'map-get-map.html',
  providers: [
    GoogleMaps
  ]
})
export class MapGetMapPage {
  map: GoogleMap;
  mapElement: HTMLElement;

  constructor(public navCtrl: NavController, public navParams: NavParams, private googleMaps: GoogleMaps) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapGetMapPage');
      this.loadMap();
  }
 loadMap() {
    this.mapElement = document.getElementById('map');
      console.log(this.mapElement);

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create(this.mapElement, mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');

        this.map.on(GoogleMapsEvent.MAP_CLICK).subscribe(
            (data) => {
                alert("Click MAP");
            }
        );
      });
  }

}


<ion-header>

  <ion-navbar>
    <ion-title>Map/getMap</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div #map id="map" style="height:100%;"></div>
</ion-content>
2 Likes
5

Thanks for your response but with me the code doesn’t work i will try with the javascript map
api

1 Like
6

You need to wait GoogleMapsEvent.MAP_READY event before using any methods.

If you even can not solve the problem, please share your project file on github or bitbucket.

If you don’t want to do that, please use the Google Maps JavaScript API.

7

It seem the Ionic Google maps native is not finish yet so use the direct plugin method

Use :

plugin.google.maps.event.MAP_CLICK

Instead:

GoogleMapsEvent.MAP_CLICK

Be sure to declare the plugin variable in your ts.file

declare var plugin: any;
1 Like
8

Thanks for your response. I tried both one responses without sucess!
i’m using javascript api the map_click isnt a problem with it.

9

i have tried but map is not loaded in the screen?