How to insert a Google Map module

Our Official Extensions Pack plugin includes a premium add-on for Live Composer that allows you to easily add Google maps to your website. Just type in the address, the API key and the module will do the rest.

Get an API key for Google Maps

Starting with June 22nd, 2016,   Google requires to enter the Google API key (browser key) to show any map on your website. With new restrictions, your website has a free allowance for 25,000 requests per day. It's more than enough for the most part of the plugin users. Let's generate a new key for your website.

  1. Log in to the Google API console via this address https://console.developers.google.com/apis/library
  2. Click on Credentials in the API Manager sidebar. google-get-api-1-highlighted
  3. Fill the project name with something descriptive and click Create. google-get-api-2
  4. Go back to the Overview section and click on Google Maps JavaScript API link. google-get-api-3
  5. On the Google Maps JavaScript API page you need to click on Enable button. google-get-api-4
  6. You will see the notice asking to create credentials for the project. Click on Go to Credentials button. google-get-api-5
  7. Select Web browser (JavaScript) option in the second dropdown and click on the blue button. google-get-api-6
  8. Now you need to give any name to the keys and fill websites field with your site address. You can put website URL as you it in the browser or use asterisks for wildcards and on the screenshot. After all the fields filed, click on Create API key button. google-get-api-7
  9. Finally Google will provide you with API key that you can copy and use in the Google Maps module on your website. google-get-api-8
  10. Before you go, let's do one more thing: activate Google API for directions service as well. For now, we do not use this feature, but it's good to have it active for the future. Go back to the Overview page and click on Google Maps Directions API link. google-get-api-9
  11. On the new page, just click the Enable button. google-get-api-10

Still need help? Contact Us Contact Us