[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

CherryFramework 4. How to insert Google Map to the page using Google map shortcode

This tutorial will show you how to insert a Google map into CherryFramework 4 based template, using a shortcode.

CherryFramework 4. How to insert Google Map to the page using Google map shortcode

  1. Log into your admin panel and create a new page or post:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_1

  2. In the Visual mode click the ‘Insert shortcode’ icon.

  3. Search for the ‘Google Map’ shortcode button:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_2

  4. Enter your physical address into the ‘Address’ field (E.g: ‘Paris, France’).

  5. Use ‘Insert shortcode’ button. A new shortcode will be automatically generated:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_3

  6. Publish the page to see the changes:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_4

  7. Google Map has been successfully created:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_5

Google Map shortcode is supplied with a premium set of options, let’s check them out:

  1. Control the initial Map zoom level (from 1 to 10):

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_6

  2. Disable/enable scrollwheel zooming on the map. The scrollwheel is enabled by default:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_7

  3. Manage styles to apply to each of the default map types:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_8

  4. Alter Map height value (in pixels):

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_9

  5. Upload your own Map marker:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_11

  6. Enable/disable state of the Zoom control for Google Map:

    CherryFramework4_How_to_insert_Google_Map_to_the_page_using_Google_map_shortcode_10

This is the end of the tutorial. Now you know how to insert a Google map, using a shortcode.

Feel free to check the detailed video tutorial below:

CherryFramework 4. How to insert Google Map to the page using Google map shortcode