Header Map

Updated: July 27, 2018

Header Map element displays Google Map in the header of page. So you are able display current place, or set of places in form of pins defined by the Items Custom Post Type. Each pin on the map represent one Item Custom Post type created in WordPress admin panel.

To use Header Map on the page, do not forget select Header Type in the header options of currently edited page in Page Builder:

Header Type

All you need to do is just enable the Header Map Element on wanted page via Page Builder and fill out options available in element:

  • Type – select type of displayed Google Map (available are options Normal Map, Satellite Map, Hybrid Map)
  • Height – specify height of displayed Google Map
  • Address – address options are important to specify default position (address) displayed on the map. Address section include options:
    • Address: address of place displayed on the map right after page load
    • Latitude/Longitude: latitude and longitude coordinates of place displayed on the map, do not forget click on the Find button beside Address field in case you know just address of place and you do not know exact latitude/longitude coordinates. Coordinates are necessary for Google Map to specify exact position.
    • Streetview: if you want display instead standard map rather Street View, turn on this option and set up wanted view – the same view will be displayed on the website.
  • Zoom – initial zoom for standard Google Map (is not used for Streetview)
  • Auto Zoom & Fit Map – if you do not want specify any exact position on the map displayed after page load, you can turn on this option which will zoom and fit the map automatically to display all available items (markers) on the map. It’s great for Item Locations and Item Categories pages where you do not want display the same position of the map through all pages – so map fit and zoom automatically to all currently available markers on the map.
  • Clustering – by enabling this feature, all pins in specified radius (option Cluster Radius) will be merged into single object based on the actual zoom
  • Cluster Radius – radius to determine when the pins will be merged into single object
  • Geolocation – map will center on actual position of website visitor
close

Geolocation functionality in Google Chrome version 50 and newer is available only for websites that use SSL certificate.
Official source: https://developers.google.com/web/fundamentals/native-hardware/user-location/obtain-location?hl=en

Load Google Map on request

Using option “Load Map” you can select how the Google Map is loaded on your website:

  • After page load – standard behavior, Google Map is loaded immediately when page is loaded
  • After click on button – Google Map is not loaded after page load at all, only manual click of visitor on the button in place of map will load the Google Map

For more information read our article Load Google Map on request.

Advanced options

Advanced options include options to style map and change colors of map sections:

Map General Colors section

  • Map’s Border – color of the border around map
  • Map’s Hue – hue color of map
  • Map’s Saturation – saturation level of map
  • Map’s Brightness – brightness level of map

Map Object Colors section

  • Saturation – saturation level of objects on map
  • Brightness – brightness level of objects on map
  • Landscape Hue – hue color of landscape + turn on/off landscapes on the map
  • Administrative Hue – hue color of administrative areas + turn on/off administrative areas on the map
  • Roads Hue – hue color of roads + turn on/off roads on the map
  • Water Hue – hue color of water + turn on/off water on the map
  • POI Hue – hue color of Points Of Interest (POI) + turn on/off POIs on the map
  • MouseWheel Zoom – enable or disable zooming of map using MouseWheel

Header Map Element