WordPress
Plugin
WordPress Plugin

Google Maps

Fast and easy way to display a Google map on your Live Composer powered website. The extension adds a new module.

Buy this extension as part of our plugins package:

Version 1.1.7 (20 Sep 2017)

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 like 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 installed, plugin adds 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 request per day. It’s more than enough for 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 web sites 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 filed 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 Enable button.

    google-get-api-10

20% Off Promo Code for Every Subscriber

Get notifications on Live Composer security updates, development news and relevant WordPress resources.

You can unsubscribe at any time.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match