Adding a Dotted World Map to a Google Sites Website

Google Sites doesn't support custom code embeds on its free tier the way Webflow or Squarespace do, so getting a dotted world map onto a Google Sites website comes down to one thing: preparing the right image file, because the placement itself only takes a couple of clicks.

Why Google Sites is more restrictive

Google Sites is built for speed and simplicity, not flexibility — there's no CSS editor, no plugin ecosystem, and embedding raw HTML requires wrapping it in an "Embed" block that Google sandboxes in an iframe. That rules out some of the fancier tricks available on other builders, like animating an inline SVG with CSS. It doesn't rule out a map — it just means the map has to arrive as a finished image rather than as embedded code.

Adding the image

1. In the Google Sites editor, click Insert in the right-hand panel.
2. Choose Images, then Upload to select the exported map file from your computer.
3. Drag the corner handles to resize the map, or use the alignment options (left, center, right, full-width) that appear when the image is selected.
4. Click the image again and choose Data settings (the pencil-and-gear icon) to add descriptive alt text — Google Sites doesn't set this automatically, and it matters both for accessibility and for how the page is indexed.

Google Sites re-encodes some uploaded images for its content delivery network, so it's worth previewing the published page afterward to confirm an SVG with fine dot detail hasn't been visibly resampled. If it has, a PNG export at a higher resolution is a safer bet for this specific builder — see SVG vs PNG Maps: Choosing the Right Format for how to decide between the two.

Placement ideas that fit Google Sites' layout model

Google Sites lays pages out in horizontal bands rather than free-form sections, so a map tends to work best as:

• A full-width band on an About or Team page, similar to the treatment described in How to Add a World Map Background to an About Page, adapted to Google Sites' simpler band layout.
• A side-by-side element next to a paragraph on a "where we work" or company-overview page, using the two-column layout option in the Insert menu.
• A footer graphic at the bottom of the homepage, exported with a transparent background so it sits cleanly against the page's existing color.

Avoid trying to force the map behind text as a true background image — Google Sites doesn't expose a background-image property on most blocks, and text placed manually over an image block can reflow unpredictably on mobile, where Google Sites automatically restacks columns.

Keeping it fast and legible

• Export at the size you actually intend to display, or close to it — Google Sites doesn't give fine-grained control over responsive image sizing the way a code-based site would.
• A transparent-background export blends more naturally into Google Sites' white or light-colored default themes than a filled rectangle. If the map needs a filled background for contrast, use How to Choose Colors for a World Map Background to match Google Sites' limited theme-color palette.
• Since Google Sites pages are often internal wikis, team pages, or small business sites, a moderate dot density reads more clearly at the smaller display sizes typical of that context — a heavily detailed map can look muddy once compressed by Google's image pipeline.

What you lose compared to a code-based site

It's worth being upfront about the trade. On a platform like Webflow or a custom-built site, a dotted map can be inlined as real SVG markup, recolored on hover with CSS, or animated on scroll — approaches covered in Integrating SVG Maps with Webflow Projects and How to Animate a Dotted World Map with CSS. None of that is available on Google Sites' free Image block, since the map is uploaded as a flat file rather than embedded as markup. For most Google Sites use cases — an internal team page, a small nonprofit site, a personal portfolio — that's a reasonable trade for not having to touch code at all, but it's worth knowing the ceiling going in rather than discovering it mid-project.

Updating the map later

Because the map lives on Google Sites as a plain uploaded image, updating it later means re-exporting a new version and swapping the file — there's no live connection back to the original settings. If there's a reasonable chance the map's color, region, or density will need to change down the line (a rebrand, a new office location added to a "where we work" graphic), it's worth keeping a note of the original export settings, or bookmarking the generator page itself, so the update doesn't mean starting the design from scratch.

Final thoughts

Google Sites trades flexibility for simplicity, and a dotted world map fits that trade well: there's no embed code to write and no theme file to edit, just an image uploaded through the standard Insert menu. The only real preparation is getting the export right — size, background, and format — before it ever touches the page builder.