UltraKit · Widget #65

Google Maps Advanced

Multiple markers, ten map skins, custom pins, info windows, a location list and overlay cards — every variation live on one page.

10 Map Skins4 Marker Styles3 Marker Animations4 Info Window Modes2 Location List Sides4 Overlay Card Positions Custom JSON Skins
API key needed for the full demo. Without a Google Maps API key each map falls back to a simple keyless embed of the first location (skins are approximated with colour filters; multiple markers, custom pins, info windows and the location list need the key). Add your key in the widget under Google Maps API → API Key (enable Maps JavaScript API and billing in Google Cloud) — or send it to Claude and this page will be rebuilt with the key on every map.
Section 01

Map Skins

Nine ready-made skins plus your own custom JSON — same map, completely different mood.

1
Standardskin = standard — Google default
2
Silverskin = silver
3
Darkskin = dark
4
Night Blueskin = night
5
Retroskin = retro
6
Aubergineskin = aubergine
7
Greyscaleskin = greyscale
8
Oceanskin = ocean
9
Cleanskin = clean — POI & transit hidden
10
Custom JSONskin = custom — paste any Snazzy Maps JSON
Section 02

Marker Styles

Google default, a coloured pin, a coloured dot — or upload your own marker image.

1
Google Defaultpin_style = default
2
Coloured Pinpin_style = pin + pin_color
3
Coloured Dotpin_style = circle
4
Custom Imagemarker_image per location
Section 03

Marker Animation

Markers can drop in, bounce continuously, or simply appear.

1
Nonemarker_anim = none
2
Drop Inmarker_anim = drop
3
Bouncemarker_anim = bounce
Section 04

Info Window Modes

Each marker shows its title, address, phone and a “Get Directions” link.

1
Open on Clickinfo_mode = click
2
Open on Hoverinfo_mode = hover
3
First Marker Pre-openedinfo_mode = first
4
Disabledinfo_mode = none
Section 05

Location List

A clickable list beside the map — pick a branch and the map flies to it. Perfect for store locators.

1
List on the Leftlist_pos = left
2
List on the Rightlist_pos = right
Section 06

Overlay Info Card

Float an address card over any corner of the map with a directions button.

1
Top Leftcard_pos = top-left

Visit Our Office

Sat – Thu, 9:00 AM – 6:00 PM
Gulshan 2, Dhaka

Get Directions
2
Top Rightcard_pos = top-right

Visit Our Office

Sat – Thu, 9:00 AM – 6:00 PM
Gulshan 2, Dhaka

Get Directions
3
Bottom Leftcard_pos = bottom-left

Visit Our Office

Sat – Thu, 9:00 AM – 6:00 PM
Gulshan 2, Dhaka

Get Directions
4
Bottom Rightcard_pos = bottom-right

Visit Our Office

Sat – Thu, 9:00 AM – 6:00 PM
Gulshan 2, Dhaka

Get Directions
Section 07

Map Controls

Choose exactly which controls visitors get — from a locked, clean map to full exploration.

1
Default Controlszoom buttons + fullscreen
2
All Controls Onmap/satellite toggle + street view + scroll zoom
3
Minimal (no controls)every control off
4
Scroll-wheel Zoomscroll_zoom = on
Section 08

Height & Corner Radius

Tall, short, square or fully rounded — set the size and shape to fit any layout.

1
Short + Squareheight 240px, radius 0
2
Medium + Roundedheight 340px, radius 18px
3
Tall + Very Roundheight 480px, radius 44px
Section 09

Ready-Made Combinations

Three complete looks — a store locator, a contact-page map and a retro explorer.

1
Store LocatorSilver skin + list on left + coloured pins + 5 branches
2
Contact Page MapDark skin + overlay card + dot marker

Visit Our Office

Sat – Thu, 9:00 AM – 6:00 PM
Gulshan 2, Dhaka

Get Directions
3
Retro ExplorerRetro skin + bouncing markers + pre-opened info window