Skip to content

Effect 18 GoogleMap

Google map with multiple markers: each item pins a marker; clicking opens an info window. Supports street view, routes and custom map styles, with per-breakpoint heights. Ideal for store and branch locations.

Effect 18 GoogleMap preview

Live Demo

Visit the official demo page to see it in action.

Data Fields

FieldDescription
TitleMarker title (info window title)
DescriptionInfo window content (address, phone, etc.)
PictureOptional custom marker icon
Address / coordinatesMarker position (lat/lng or address)

Item form (Field Manager) screenshot:

Effect 18 GoogleMap form

Effect Settings

Map basics

ParameterDescription
Map Width / HeightMap width (default 100%) / height (default 700)
Desktop / DesktopSmall / Tablet / Mobile HeightHeights per breakpoint (default 600/500/400/300)
Default ZoomInitial zoom level (default 12)
Default latLngInitial center (picked on the map)
TypeMap type: ROADMAP / SATELLITE / HYBRID / TERRAIN
ScrollwheelAllow scroll-wheel zoom
API KeyGoogle Maps API key (required for v3)
Map StyleCustom map style JSON (optional)

Markers & info

ParameterDescription
Display Tooltips / DescriptionShow tooltips / description info
Display Route / ItineraryShow route / itinerary

Street View

ParameterDescription
Display Street View PanoramaEnable street view
Panorama LatLng / Heading / Pitch / ZoomPanorama position and view parameters

TIP

This effect requires a Google Maps API key — apply for one and fill it into the settings.

Built with VitePress