Website elementsContent blocks
Map and directions
A google map embed code for website, built into your site with no plugin and no library. A card per location with the address, phone and an optional hours line, “Open in Google Maps” and “Directions” links, and an optional map that loads from Google only when someone presses “Show the map”. No API key, and nothing from Google at page load.
One location, map beside the details
Loads a map from Google.
Millennium Park
201 E Randolph StChicago, IL 60602
Open daily, 6 AM to 11 PM
Several locations, one card each
Loads a map from Google.
The second card has no map, just the links. The phone number is a 555 number, reserved for fiction.
You'll need to give us
- The address of each locationNeeded to startAs you would write it on an envelope, with a phone number if you want one shown.
- Whether each location should offer a map as well as directionsThe map loads from Google only when a visitor asks for it.
Send these with your request and we can start straight away. Everything else is ours to do.
Show people where you are and get them there in one tap, without a Google script on every page.
Also called
UABB Google MapPowerPack Google MapElementor Google MapsWP Google MapsGoogle Maps embedstore locatorlocation cardget directions button
What it replaces
- UABB / PowerPack “Google Map” modules (Beaver Builder)
- Elementor’s Google Maps widget
- WP Google Maps and similar plugins
- a Google Maps <iframe> pasted into the footer
Good for
A contact or visit page, a footer with the address, several branches each with its own card. Anywhere the question is “where is it and how do I get there”.
Not for
A styled, branded or interactive map: custom colors, your own markers, clustering, a store locator that searches by distance. That needs the Google Maps JavaScript API, which needs an API key and a billing account, loads Google’s script on every visit, and adds Google’s map origins to the site’s CSP and consent policy; quote it as its own piece of work. Full opening hours are business-hours, which also owns the LocalBusiness structured data.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- Each address is an <address> under the location’s heading; the phone number is a tel: link.
- The links name their place for a screen reader (“Open in Google Maps: Navy Pier”, “Directions to Navy Pier”), so a list of links still makes sense. Both are at least 44px tall.
- The facade is a real <button> named “Show the map of <name>”, described by the visible notice “Loads a map from Google.”, so nobody loads a third party without being told. Pressed, it becomes an <iframe> titled “Map of <name>” and focus moves into it.
- Nothing moves except the button’s pill growing slightly on hover, which prefers-reduced-motion removes.
- Without JavaScript the cards and their links are all there, and the facade is not shown: a button that could not work is not rendered.
Where it's live
- superherotech.ai: /elements/map/ (demo)
How to ask for it
“The map on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Content blocks
See them all working- Responsive table
Timetables, prices and comparisons that read on a phone: a proper table on a wide screen, and a card per row, or a table you can swipe along, on a narrow one.
- Business hours
Open now, closing in 40 minutes, back tomorrow at 8: always right, in the shop’s own time zone.
- Flip box
A card that turns over to say more — works on a phone, not just on hover.
- Info list
Lay out your services, how you work step by step, or your story year by year, each with an icon or a number, in a list that reads on any screen.
Want the map and directions on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.