Google Maps API Integration to HubSpot Forms

[AngelaDrake]

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!

[himanshurauthan · Accepted solution]

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,

[AngelaDrake]

This helped very much!  Thank you for your time.  

[LMeert]

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

[TiphaineCuisset]

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