This add-on for Live Composer is a new module that allows you to easily add Google maps to your website. Just type in the address and the module will do the rest.
Available Options
- Custom marker image ( upload image )
- Mousewheel zooming ( enable/disable )
- Doubleclick zooming ( enable/disable )
- Dragging ( enable/disable )
- Map UI ( enable/disable )
- Map Type ( Hybrid/Roadmap/Satellite/Terrain )
- Height ( numeric )
- Map Zoom ( numeric, 1-21 )
There are also the usual styling options in all the modules ( border, paddings, backgrounds… ) and animation options ( on load animations ).
Demonstration
Installation
Simply install it as a plugin and activate it. The module will be available in the modules listing.
Usage
After installation, the plugin adds the Google Maps module in Live Composer.
Get an API key for Google Maps
As from June 22nd 2016 Google requires to enter 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.
- Log in to the Google API console by clicking this link to Google API console
- Click on Credentials in the API Manager sidebar.
- Fill the project name with something descriptive and click Create.
- Go back to the Overview section and click on Google Maps JavaScript API link.
- On the Google Maps JavaScript API page you need to click on Enable button.
- You will see the notice asking to create credentials for the project. Click on Go to Credentials button.
- Select Web browser (JavaScript) option in the second dropdown and click on the blue button.
- Now give any name to the keys and fill the web sites field with your site address. You can put the website URL as you would put it in the browser or use asterisks for wildcards and on the screenshot. After all the filed filed, click on Create API key button.
- Finally Google will provide you with an API key that you can copy and use in the Google Maps module on your website.
- 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 in the future.Go back to the Overview page and click on Google Maps Directions API link.
- On the new page, just click Enable button.
