## Installation

1. Install Elfsight Google Maps WordPress Plugin `elfsight-google-maps-cc.zip` to your website. Don't know how? Please learn here.

2. Go to Google Maps page in WordPress admin menu.

3. Create a new widget, adjust all settings and get a ready-made shortcode.

### Use Google Maps as a WordPress Shortcode

#### 1. Create a new widget

You can use Elfsight Google Maps as a WordPress shortcode. To do this, you have to create a new widget, set all options in the Elfsight editor and save it.

#### 2. Copy-paste the shortcode

You will see the new widget's shortcode in the widgets list. You can copy-paste it into the required place of your website.

Example of the Elfsight Google Maps shortcode:

    [elfsight_google_maps id="1"]

### Use Google Maps as a
Gutenberg Block

You can use Elfsight Google Maps as a block for Gutenberg editor. Just add it to your page during page building and select one of the available Google Maps widgets from the list.

### Use Google Maps as a
WordPress Widget

To use Elfsight Google Maps as a WordPress widget, go to Appearance -> Widgets, and drag Elfsight Google Maps WordPress widget to any widget section. Next, select one of available Google Maps widgets from the list.

### Use Google Maps as a
Visual Composer Element

You can use Elfsight Google Maps as a Visual Composer element. Just add it to your page during page building and select one of the available Google Maps widgets from the list.

## Options

Option | Default Value | Description
--- | --- | ---
Markers
Markers * | null | Set the list of markers to be displayed on a map. The following parameters can be configured for each marker: Position - Set the marker's position. You can set its name or address in text format or set the specific coordinates (latitude, longitude separated by a comma). Icon - Set the marker's icon. You can select a default Google Map icon, or one of the icons from our library. If you can't find the icon you're looking for, you can set custom icon URL or request a new icon at support@elfsight.com infoWindow - The option allows you to open an information window by clicking on the marker. infoTitle - Set the marker's title for the info window. Usually, it's the name of the place marker indicates. infoDescription - The marker's description on the info window. infoImage - Set the URL of the image to be displayed on the info window. Usually, it's an image of the indicated place. infoAddress - Set the address to be displayed on the info window. infoSite - Set the website URL to be displayed on the info window. infoPhone - Set the phone number to be displayed on the info window. infoEmail - Set the email to be displayed on the info window. infoWorkingHours - Set the working hours to be displayed on the info window. infoDirections - Display directions button in the info window. This button allows to set the directions from your current position to the marker. Works only with https. infoWindowOpenedByDefault - The option allows you to make an information window opened by default. animation - Select marker animation from the available ones: drop, bounce. linkUrl - Set the link URL and this link will be opened in a new browser tab by clicking on the marker.
Layout
Width | auto | Set the map width in pixels or %, or set "auto" and the plugin will fit its container width.
Height | 700 | Set the map height in pixels.
Locations Panel - Display panel | true | Activate this setting to display your locations in a side panel. Clicking on a location in the list will bring up its info window on the map.
Locations Panel - Show / hide by default | true | Activate this setting to display the open locations list by default. Deactivate it to display only the panel header by default.
Locations Panel - Panel Title | Locations List | Set the panel title depending on the locations type you display (e.g. Our stores, Our offices in New York).
Locations Panel - Location Elements | title, image, address, phone, working hours | Check the location elements to display for each location on the list.
Map
Center (address, coordinates, auto) | auto | Set the default map center. You can set its name or address in text format or set the specific coordinates (latitude, longitude separated by a comma). Set "auto" to automatically calculate the center depending on the markers' position.
Zoom (0-20, auto) | 16 | Set the default map zoom. It supports numeric values 0-20. You can also set "auto" and zoom will be calculated automatically to display all the set markers.
Map type | roadmap | Select your Google map type from the list (roadmap, satellite, hybrid, terrain).
Controls | zoom, mapType, scale, streetView, rotate, fullscreen | Select the map controls to be displayed on the map.
Scroll wheel scaling | false | This option lets you scale the map with the mouse scrolling wheel.
Layers | null | Set the layers separated by comma to be displayed on the map. The following optinos are available: poi, traffic, transit, bike, streetView.
Language | en | Choose one of 7 available languages of the info window UI (dk, en, es, ja, pl, pt-br, ru).
Style
Color scheme | default | Select one of the four predefined color schemes (default, silver, night, retro). Set custom colors to create your own scheme.
color_geometry | null | Set color for geometry.
color_labels_text_fill | null | Set color for labels text fill.
color_labels_text_stroke | null | Set color for labels text stroke.
color_administrative_geometry_stroke | null | Set color for administrative geometry stroke.
color_administrative_land_parcel | null | Set color for administrative land parcel.
color_landscape_natural_geometry | null | Set color for landscape natural geometry.
color_poi_geometry | null | Set color for poi geometry.
color_poi_labels_text_fill | null | Set color for poi labels text fill.
color_poi_park_geometry_fill | null | Set color for poi park geometry fill.
color_poi_park_labels_text_fill | null | Set color for poi park labels text fill.
color_road_geometry | null | Set color for road geometry.
color_road_arterial | null | Set color for road arterial.
color_road_highway | null | Set color for road highway.
color_road_highway_geometry_stroke | null | Set color for road highway geometry stroke.
color_road_highway_controlled_access_geometry | null | Set color for road highway controlled access geometry.
color_road_highway_controlled_access_geometry_stroke | null | Set color for road highway controlled access geometry stroke.
color_road_local_labels_text_fill | null | Set color for road local labels text fill.
color_transit_line_geometry | null | Set color for transit line geometry.
color_transit_line_labels_text_fill | null | Set color for transit line labels text fill.
color_transit_line_labels_text_stroke | null | Set color for transit line labels text stroke.
color_transit_station_geometry | null | Set color for transit station geometry.
color_water_geometry_fill | null | Set color for water geometry fill.
color_water_label_text_fill | null | Set color for water label text fill.

## Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center