WEBVTT 1 00:00:00.240 --> 00:00:04.100 Hey there. We'll be taking a look at how to connect Google Maps to your website. 2 00:00:04.319 --> 00:00:12.420 If we quickly take a look at the front end of our website, we can see that Google presents us with an error message when trying to conduct a location based search. 3 00:00:12.625 --> 00:00:17.445 This is because we need to create and connect a Google Maps API key for our website. 4 00:00:17.825 --> 00:00:24.165 But not to worry, it's only a one time step you'll need to complete in order to get Google Maps and location search functionality 5 00:00:24.545 --> 00:00:29.470 working on your website, so you'll only need to set up Google Maps once and never touch it again. 6 00:00:29.610 --> 00:00:34.350 Before you set up Google Maps, be sure that you have already connected your live domain to your website. 7 00:00:34.650 --> 00:00:39.310 If you don't, then you will need to go through this process again once your domain has been connected. 8 00:00:39.685 --> 00:00:43.465 So let's go into our website's admin area, and we'll hop into settings, 9 00:00:43.845 --> 00:00:44.825 general settings, 10 00:00:46.405 --> 00:00:51.540 and then the integrations tab. If we scroll down just a bit, we'll see the Google Maps section. 11 00:00:51.780 --> 00:00:56.920 Setting up your Google Maps API key is a relatively simple process that should only take a few minutes. 12 00:00:57.140 --> 00:01:01.240 However, Google does have a tendency to regularly update their user interface. 13 00:01:01.620 --> 00:01:08.065 If what you'll be seeing in this video doesn't match what you're seeing on your end from Google, be sure to click the learn more link here. 14 00:01:08.365 --> 00:01:14.705 This will take you to our written documentation, which includes screenshots and will walk you through exactly how to set up Google Maps. 15 00:01:14.925 --> 00:01:20.305 Even if this video has become outdated when you're watching it, our documentation will always be kept current. 16 00:01:20.670 --> 00:01:24.290 Okay. So the first thing we'll wanna do is head on over to cloud. Google.com/maps 17 00:01:26.590 --> 00:01:27.090 platform, 18 00:01:27.630 --> 00:01:32.130 and make sure that you're signed into your Google account that you use for your website or your business. 19 00:01:32.350 --> 00:01:36.534 Here, we'll click the get started button, and we'll be prompted to enter our billing information. 20 00:01:36.994 --> 00:01:39.575 This might sound scary, but Google currently provides 21 00:01:40.115 --> 00:01:41.875 $200 in free credits each month. 22 00:01:41.875 --> 00:01:49.110 With this $200 monthly credit, the vast majority of our users find that their use of Google Maps on their website is completely free. 23 00:01:49.170 --> 00:01:59.415 And if you do happen to exceed the $200 monthly credit, that probably means your website is already generating enough revenue where the small fee that Google will impose won't make much of a difference at all. 24 00:01:59.495 --> 00:02:03.495 So I'm going to set up my billing account, and I'll be back with you in just a second. Okay. 25 00:02:03.495 --> 00:02:09.275 So I entered my billing information and clicked the button that said start my free trial, which brought me to this page. 26 00:02:09.495 --> 00:02:12.155 Here, it's important that we select all 3 APIs, 27 00:02:13.090 --> 00:02:15.110 maps, routes, and places. 28 00:02:15.410 --> 00:02:19.910 We'll click the enable button, and now we'll respond to a few questions about our project. 29 00:02:25.185 --> 00:02:29.685 So that's it for creating the API key, but we do still have a few more steps to take. 30 00:02:29.985 --> 00:02:36.545 So let's copy this API key and go back into our website's admin area so that we can paste it where prompted to. 31 00:02:36.545 --> 00:02:41.630 We can save these changes, but we do still have a few more steps to take within the Google Cloud Platform. 32 00:02:41.850 --> 00:02:43.870 So let's click done on this pop up. 33 00:02:44.970 --> 00:02:47.630 And in the left hand menu, let's click on credentials. 34 00:02:49.210 --> 00:02:52.510 We'll then click on this Maps API key that we just created. 35 00:02:53.745 --> 00:02:56.965 And for application restrictions, we'll select HTTP 36 00:02:57.505 --> 00:02:58.005 referrers. 37 00:02:58.625 --> 00:03:02.085 If we scroll down just a little bit, we'll come to website restrictions. 38 00:03:02.465 --> 00:03:06.405 Here, we'll be adding 4 items. So let's click add an item, 39 00:03:06.720 --> 00:03:08.819 and the first one will be asterisk.managemydirectory.com. 40 00:03:12.480 --> 00:03:13.540 We'll click Done, 41 00:03:14.159 --> 00:03:17.780 and we'll add a second one, which will simply be manage my directory.com, 42 00:03:18.815 --> 00:03:20.275 and we'll click done again. 43 00:03:20.655 --> 00:03:21.715 Manage my directory.com 44 00:03:22.174 --> 00:03:26.595 is the URL of our website's admin area, so that's why we need to add it here. 45 00:03:26.735 --> 00:03:28.355 We'll now add another item, 46 00:03:28.894 --> 00:03:32.674 and this will be asterisk dot and then our website's domain. 47 00:03:32.880 --> 00:03:36.340 So in this example, our website's domain is set up my website.com, 48 00:03:36.960 --> 00:03:38.660 so we're inputting for this referrer. 49 00:03:39.840 --> 00:03:40.980 Set up my website.com. 50 00:03:42.080 --> 00:03:49.915 We'll click done, and we'll add our last item, which will just be our website's domain, and we'll click done one last time. 51 00:03:49.975 --> 00:03:56.075 And finally, for the API restrictions, we wanna make sure that the option don't restrict key is selected. 52 00:03:56.535 --> 00:03:58.795 Once all this is done, we can click save, 53 00:04:00.230 --> 00:04:01.830 and that's all there is to it. 54 00:04:01.830 --> 00:04:06.230 Google Maps should now be working properly on our website, so let's test it out. 55 00:04:06.230 --> 00:04:08.010 Let's head on over to our website. 56 00:04:08.630 --> 00:04:11.930 We'll refresh it, and let's try entering the location. 57 00:04:13.025 --> 00:04:16.725 Perfect. So we can now see that we're getting location suggestions from Google. 58 00:04:16.785 --> 00:04:20.565 This lets us know that Google Maps is now set up correctly on our website. 59 00:04:20.705 --> 00:04:23.425 So if you have questions, please reach out at any time. 60 00:04:23.425 --> 00:04:26.057 Our team is always happy to help and support you.