Find a Store

Step by Step

 

Set the API Keys

 

For this component works properly, are necessary two APIs. Check the links and when you have the APIs Keys, follow the paths to configure.

 

  • Maps JavaScript API (https://developers.google.com/maps/documentation/javascript/overview)

    ◦ Configure the Google Maps API key (/admin/cohesion/configuration/google-map-api-key).

 

  • Geocoding API (https://developers.google.com/maps/documentation/geocoding/overview).

    ◦ Create a new provider(Geocoder providers - GoogleMaps) and inform the Google Geocoding API key (/admin/config/system/geocoder/geocoder-provider)

 

 

Configuring the Taxonomy:

 

To configure the Find Store component you need first create a Google Map Marker category.

 

1.  Go to Structure > Taxonomy, search for "Google Map Marker: Category", click on "List Terms" and after, click on "+ Add term".

 

 

2. Inform a name and a description for your new category, and click on "Save and go to list" to finish it.

 

3. Go to Content > Add Content > Google Map Marker and inform a Name, Address and select the Category that you created.

 

   ** Note: you can fill the fields Description, Image, Map link, or Latlon but they are not mandatory.

 

4. Click on "Save" to finish it.

 

 

Configuring the Component:

 

1. In the Layout Canvas of the page that you want to add the Find Store, click on "+", and search for the component.

 

2. Drag and drop the component, in the position that you want and click twice on the component to configure it.

 

 

3. Follow the instructions to set the configurations:

 

• Color Options:

  ◦ Layout options: choose a color for the background and select a desktop layout option. With the Row option, the search field will be on the right side, with Row Reverse the field will be on the left side.

 

  ◦ Search bar: choose a colors for the title, background, and input text.

 

  ◦ Store list: select the color options to customize the Store list.

 

• General:

 

  ◦ Title: inform the name that will be displayed on the title. 

  ◦ Zoom: Zoom level determines the initial resolution of map.

  ◦ Custom marker image: Use these settings to define the image file that will represent the pin on the maps.

 

  ◦ Entity: Here inform the name of the Category that you create. This option is important because you can have several “google maps markers” for different places in the world, and with different proposals.

 

4. Click on "Apply" to save it.