Get started with Elfsight Google Maps 1.6.0

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