How to upload google map differently based on the user?

Ionic Framework ionic-v3
1

Hi,
I’d like the users of my app with the role1 load the GoogleMap in this way:

https://maps.googleapis.com/maps/api/js?key=<mycode>

while the users with the role2 load the map in this way:

https://maps.googleapis.com/maps/api/js?key=<mycode>&libraries=drawing

In the head of index.html I have:
<script src="https://maps.googleapis.com/maps/api/js?key=<mycode>"></script>

Which is the best way to change the script tag dynamically?
The map is shown after the login phase.

I want to do this because I fear that the call counter of the Google drawing library will increase too much even if the users with role2 do not use the functions of the drawing library.

Any idea?
Thank you very much

cld

2

You can do something like this:

<script [src]="myGoogleSrc"></script>

Then declare it in your TS file:

myGoogleSrc:string="https://maps.googleapis.com/maps/api/js?key=<mycode>";

And change the way you want:

changeSrc(){
        this.myGoogleSrc=.....
}
3

Hi, thank you for your answer.
Yes I understand, but the problem is that t5he script tag is into the index.html page.
I don’t think I can use variables like “myGoogleSrc” in that page.

4

Did you manage to solve? I don’t think you should insert scripts in the index page. I believe you can use the Google Maps API in the pages of your app where they are needed.

5

Hi,
I’ve tried many ways to add the Google scripts dynamically but I always have some problems: map added multiple times, map added too soon or too late.
The only way to have no problems is to put the script in the index.html.
Almost all the tutorials on the web put the Google Api in the index.html page.
Yes, it would be nice to add the map afterward.

However no, I’ve not yet solved the problem.

cld

6

I believe you are searching for Web pages tutorials, not specific for Ionic or Angular.

Josh Morony posted some awesome tutorial on how to implement Google Maps API in an Ionic Application. You can find the post here, it is very detailed and show what you need to run the API inside the pages.

Another one very good and more updated is from FreakJolly.com

7

Thank you very much, I’ll read these tutorial again surely I did something wrong.
I’ll update this post asap.

cld

1 Like