How i can integrate google map to my JS and where?

I have a HTML File which name ‘Pending-orders-details.html’ it’s a request page so based on the order code will return JSON data including the Lat and long
My question is :
-1 Where can i add the script in that file ‘Pending-orders-details.html’ ?
-2 How can i display the map on that file ‘Pending-orders-details.html’ ?
-3 How to use NPM and EXTERNAL JS Script ?
Thank you

read it => Google Maps Platform 문서  |  Maps JavaScript API  |  Google Developers

you have to pay for using it (it’s not free)

1 Like

Thank you for reply
I know how to integrate this but i need to know how to integrate this into pages/pending-orders.html file
i tried before but the only way is using index.html that in the root of the project is there a way to include directly inside /page/pending-orders.html ?

f7 is a single page application
you can use the api from everywhere, after you add this line to your app:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

in other circumstances,
i would ask you for your api-key to make it work for you, but don’t sent it to me.
you should trust nobody.

Alright i understood now
i was think that ii have to include the script using npm inside the targted file
so just i need to add it inside index.html
but you don’t think that will be much to download all files maybe alot of scripts in all application without needs ?

Because this will be a lot for example to add google map js file in all application and you need it just in one or two files

you have to include it only once.

the script is just 163,8 kB (163.774 bytes)
basically, is nothing.

all the hard work is done on google-servers
don’t worry about it.

1 Like

Take A look please it doesn’t works
This is on my pending-orders-deatils.html file```

I can’t use it in other file because of order data from database so every request have it’s own code
but it look like never will work is there an other solution ?
Reply below

In other word how can i install library from NPM and use them on the f7 ?

it will be better to use the official way => Google Maps Platform Documentation  |  Maps JavaScript API  |  Google Developers

but if you insist, then here => mutable-https-e8vlkw

now everybody can use your api-key, don’t do it again.

preview => https://e8vlkw-5173.preview.csb.app/

Thank you so much, i didn’t saw the key :saluting_face: :smile: