Ionic Google Map

[aparna19]

I have been trying to add google map to my app using @ionic-native/google-map package but my map is visible only on 4.x Android versions not any other versions. Here is my piece of code.

export class MapPage{

map:GoogleMap;
mapElement:HTMLElement;
lati:any;
longi:any;
constructor(private googleMaps:GoogleMaps,private geolocation:Geolocation){}


ionViewDidLoad(){

    this.loadMap();
}

loadMap(){
this.geolocation.getCurrentPosition().then((pos) => {
this.lati=pos.coords.latitude;
this.longi=pos.coords.longitude;

this.mapElement=document.getElementById('map');


let mapOptions:GoogleMapOptions={
    camera:{
        target:{
          lat:this.lati,
          lng:this.longi
        },
        zoom:18,
        tilt:30
    }
};
console.log(mapOptions);
this.map=this.googleMaps.create(this.mapElement,mapOptions);
this.map.one(GoogleMapsEvent.MAP_READY)
.then(()=>{
    console.log("Map is Ready!");

    this.map.addMarker({
        title:'Ionic',
        icon:'blue',
        animation:'DROP',
        position:{
            lat:this.lati,
            lng:this.longi
        }
    })
    .then(marker =>{
        marker.on(GoogleMapsEvent.MARKER_CLICK)
        .subscribe(()=>{
            alert("clicked");
        });
    });
});

}).catch((error)=>{
console.log(‘error get location’,error);
});
}
}

[Sidharth_1999]

Have you considered using ElementRef and ViewChild instead of document.getElementById to refer to the map? I think it’s always a helpful practice to stick to the framework’s features to enhance the performance of your app… In theory, you shouldn’t even need document functions in an Ionic app

[aparna19]

Thanks for help. It was some supporting libraries which were not installed after installing at SDK Manager in Android Studio and it worked!

[Judgewest2000]

@Sidharth_1999 is absolutely right. ViewChild should be the only way to access the DOM. Using ID’s is not safe.

[jaydz]

@Judgewest2000, I’m 100% aware of that, but am not very experienced with ViewChild and accessing the DOM. Essentially, I’m building a map app knowing I’ll have to reverse engineer those weaknesses eventually.

Would you be willing to post a quick example of using ViewChild to access an

<ion-searchbar [(ngModel)]="address" (ionInput)="getResults($event)"></ion-searchbar>

?
If you find the time it would be immensely helpful. I’m struggling to put the pieces together in this area.

I’ll owe you 20 bucks.

And honestly, your 2 cents on the subject might be more valueable than an example. I can copy paste all day long. Perhaps your perspective on how ViewChild and that specific element interact would be best.

The $20’s on the table either way

[Judgewest2000]

Right let’s go back up one level…

What are you trying to achieve??

[jaydz]

Good thinking…
I have an app, googlemaps is working, autocomplete is working, google places: working.

But, my code contains things like this:

import {etc..}

export class MapPage {
_sbElement: HTMLInputElement;
constructor() {
}
ionViewDidLoad() {
this._sbElement = document.getElementsByClassName('searchbar-input')[0];
let autoPlaces = new google.maps.places.Autocomplete(this.sbElement);
  }
}

That’s a rough estimate of a working example I’ve put together.
Plus a bunch of other stuff of course.

How would I go about using ViewChild to achieve the same result in a safe manner?
As in, referencing the search bar and passing that reference to autoPlaces, but without document.getElementsByClassName

Sorry. Have to edit

this._sbElement = document.getElememtsByClassName('searchbar-input')[0];

It’s actually

this._sbElement = <HTMLInputElement>document.getElememtsByClassName('searchbar-input')[0];

[Judgewest2000]

Howdy,

I’ve got a sleeping baby on me atm so I’ll keep it brief

Two things:

• Obviously Ionic does a lot of wrapping of native elements so your mileage may vary as to how successful it’ll be using them for this specific case. You might find it easier working with a regular element with only slight scss trickery.

• Regardless of the type of element you settle on you you will need to add a hashtag to the element…

<input type="text" #searchbar />

Then to reference it you use the ViewChild…

@ViewChild('searchbar') searchBar: ElementRef;

Then to get the element itself…

useElement(){
   const element = this.searchBar.nativeElement as HTMLInputElement;
   let autoPlaces = new google.maps.places.Autocomplete(element);
}

Let me know if that’s enough or not.

[jaydz]

Definitely a big help. A different perspective was necessary. Mine sucked on this topic I guess. 2 questions.

1. When you type

@ViewChild('searchbar') searchBar: ElementRef;    

Is searchBar: ElementRef; basically the ViewChild version of

word: string;     ?

2. I’m referencing the DOM, but am typing my items in a pretty solid manner. Does remaining vigilant with typing reduce the negative impact of referencing the DOM to a point that using @ViewChild becomes unnecessary or even less necessary?

searchBarInput: HTMLInputElement;
searchBarResults: HTMLCollectionOf<Element>;

thanks man. Appreciate any response and wisdom.

[Judgewest2000]

Sorry, not getting the first question… do you mean what are you eventually getting back from the ViewChild? If so you’re getting a reference to the HTML element itself. So you can do elementName.innerHTML = ‘whatever’;

Second question:
The real world problem is no different than any other kind of reuse issues in any framework. If you put this stuff into a component with an Id or class as a reference, and you end up using that component multiple times like in a loop or whatever, it’s game over, you’ll select the wrong one etc all the time.

You might think you ‘never’ will. You will!!! Might not be with this component but with another.

Also keep in mind when you navctrl.push to another page, the previous page’s contents are still in the dom, and that’s a real world obvious problem.

[jaydz]

Sorry. A sleepless night is seriously effecting my communication skills. You answered what I was asking with question 1.

And, as far as question 2, thanks for the advice. It is appreciated. Good points all around.

Thank you.

[Judgewest2000]

Don’t forget to thumb up or mark as solution where appropriate

[jaydz]

I didn’t even know I could thumb up! I’ll do so.

You scored one more like, sir. Thanks much.
Can one literally thumb-up a post?

[jaydz]

@Judgewest2000, I’ve been able to completely gut my app of direct DOM references using ViewChild and ViewChildren, and made some real progress in combining google maps PlacesService and Autocomplete. So, Thank you again for the chat earlier.

[Judgewest2000]

If that $20 is on the table give it to some charity in Las Vegas re the recent shootings.

[jaydz]

Consider it done, @Judgewest2000. If there is a specific charity you’d like to see benefit, let me know. If not, I’ll find one on my own. Great random opportunity to do something good for others.

Cheers

[Judgewest2000]

Any you like that’s relevant.

This gofundme looks pretty good for the cause.

Click here to support LAS VEGAS VICTIMS' FUND organized by Steve Sisolak

Thank you

[aparna19]

As I was going through ElementRef in Angular Documentation “https://angular.io/api/core/ElementRef”, It was mentioning some security issue.Is it still preferred to access DOM that way?

[Panda]

hahaha
I didn’t forget you.

[Judgewest2000]

Didn’t forget what??