Google Maps JavaScript API

[Aladdin1]

Hello everyone,

I am implementing a Landing-Page on Hubspot and I want to add the google maps to this page. But I am facing the problem, that I don't want to add the embed Maps, because I am not just showing an address or anything similar. In fact I am making interactions on the map and to do that I need to use the Maps JavaScript API.

I've tried to import the maps, but it seems, that it's not working. That's why I am writing here. Basically I need to ask, if anyone tried this before or has any tricks to do that. I've searched a lot about this problem, but I couldn't find any answer.

Thank you in advance!

[Aladdin1 · Accepted solution]

@dennisedson Thank you very much for your answer! 
Yeah, I did make some progress on this issue. I found, that after importing the Google Maps JavaScript API you need just to write the whole code in a script tag, which you can declare after the importing script tag. Just like this:

//module.html
{% require_js position="head" %}
    <script src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initMap&libraries=visualization&v=beta" async defer></script>

{% end_require_js %}
{% require_js position="head" %}
    <script class="mainScript">
         //Code
         async function initMap() {
            //Your Map Code 
         }
    </script>
{% end_require_js %}

I tried to write the code in a separate js file, but when I link the file to the module, then I face the same issue again, I mean, I can't compile and show the map anymore. I even tried to write the code in the jQuery part of the module, but I was facing again the same issue.

So my solution is to import the map with the script tag and then write the code in another script tag after importing it. And here you can see my result:

If you @stefen have any other tricks to do that, then let me please know about it 🙂

Thanks!

[dennisedson]

@Aladdin1 

Apologies for the delayed response.  Have you made any progress on this? 

Can you add some code to the thread that you are working with (hash out your google api key)?  Are you getting any console errors?   What kind of interactions are you trying to create? 

@stefen , Happy new year 😜!  I am sure you have done some Google Maps integrations.  If @Aladdin1  adds some details, can you lend a hand?