Marketing Integrations

AngelaDrake
Participant

Google Maps API Integration to HubSpot Forms

SOLVE
Wondering if anyone has had any success integrating Google Maps API into their HubSpot forms?  One of our main marketing initiatives is mailing a catalog to customers and they are notorious for inputting incorrect data.  Auto-fill forms would eliminate many clean up hours for our admin team.  Thanks for any insights!
1 Accepted solution
himanshurauthan
Solution
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Google Maps API Integration to HubSpot Forms

SOLVE

Hello @AngelaDrake,

 

So basically in this case you can use Autocomplete.

 

The Google Map Javascript API includes the Google Places Library which includes Autocomplete. This is incredibly helpful when a user mistakenly/intentionally shares the wrong location. With Autocomplete, we can quickly get this functionality started and running.

 

In order to use this functionality, you must take the following actions:

 

  • The Google Places Library must first be added to the index.html file before the closing body tag. (Ensure to add your API Key in the URL).

    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>​

     

  • The autocomplete object needs to be created next, which is what we want to accomplish.

      new google.maps.places.Autocomplete(document.getElementById("autocomplete"));​

There are a few requirements:

 

The input DOM element is the primary one to which we want to add the auto-completion feature. To accomplish this, add the autocomplete id attribute to the input field, like this:

 

<input

    type="text"

    placeholder="Enter your address"

    id="autocomplete"

/>

 

And if you want to learn more about this, kindly click on this link

 

Hope this will help you out!

 

Regards,

Digital Marketing & Inbound Expert In Growth Hacking Technology

View solution in original post

4 Replies 4
himanshurauthan
Solution
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Google Maps API Integration to HubSpot Forms

SOLVE

Hello @AngelaDrake,

 

So basically in this case you can use Autocomplete.

 

The Google Map Javascript API includes the Google Places Library which includes Autocomplete. This is incredibly helpful when a user mistakenly/intentionally shares the wrong location. With Autocomplete, we can quickly get this functionality started and running.

 

In order to use this functionality, you must take the following actions:

 

  • The Google Places Library must first be added to the index.html file before the closing body tag. (Ensure to add your API Key in the URL).

    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>​

     

  • The autocomplete object needs to be created next, which is what we want to accomplish.

      new google.maps.places.Autocomplete(document.getElementById("autocomplete"));​

There are a few requirements:

 

The input DOM element is the primary one to which we want to add the auto-completion feature. To accomplish this, add the autocomplete id attribute to the input field, like this:

 

<input

    type="text"

    placeholder="Enter your address"

    id="autocomplete"

/>

 

And if you want to learn more about this, kindly click on this link

 

Hope this will help you out!

 

Regards,

Digital Marketing & Inbound Expert In Growth Hacking Technology
AngelaDrake
Participant

Google Maps API Integration to HubSpot Forms

SOLVE

This helped very much!  Thank you for your time.  

 

LMeert
Guide | Platinum Partner
Guide | Platinum Partner

Google Maps API Integration to HubSpot Forms

SOLVE

Hi @AngelaDrake,

Adding autocomplete on HubSpot forms is definitely doable.

You can follow the steps indicated in this tutorial for that.

Basically :

- create your project on the google dev platform

- activate the places API and then generate an API key

- add this script in the footer of the pages where you'll have forms (you can do that on every page but it's a bad SEO practice to load unnecessary things) :

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>

 

- Once you've done that, you'll also need to add another script that will take care of loading an autocomplete object (that will enable the autocompletion widget on your form field) :

new google.maps.places.Autocomplete(
        autocomplete_element,{"type":"address"}
);

 

The Autocomplete function takes two parameters :

1. the html element where you'll need the autocomplete to happen, i.e. your address field

2. autocomplete options. Regarding these I suggest you dive deep into the documentation as Google explains how to narrow the search and prevent your autocomplete calls to go through the roof as it can get quite expensive.

In the example above, I've simply added the type of autocompletion I wanted : the full address.

 

You'll just need a consistent way of getting the right html element from the page but this should be easily doable.

Side notes :

- Be careful with your API key, as it will be available to anyone curious enough to open their browser dev console => restrict it to your domain only to prevent it from being used elsewhere.
- This API costs money, Google offers 200$ I think when you start, but you'll have to enter a credit card for it to run.

- You could also take the problem elsewhere and make a call to the places API from a workflow using a custom code node (if you have an Operations Hub pro subscription) and correct the addresses after they are validated by the users (more risky than using the autocomplete though).

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

TiphaineCuisset
Community Manager
Community Manager

Google Maps API Integration to HubSpot Forms

SOLVE

Hi @AngelaDrake 

 

Thank you for reaching out.

 

I want to tag some of our experts on this - @Kevin-C @LMeert @himanshurauthan do you have any thought for @AngelaDrake on this?

 

Thank you!

Best

Tiphaine


Saviez vous que la Communauté est disponible en français?
Rejoignez les discussions francophones en changeant votre langue dans les paramètres !

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !