9/9

Embed a Google Map on Your Florist Website (The Easy, No-Code Way)

22/10/2025
Siobhan Thomson
Embed a Google Map on Your Florist Website

Recently I showed you why having your shop address on your website matters for both customers and Google rankings. Today, let's take it further with something even better and that is an actual interactive Google map.

> Learn the importance of your florist shop address

I know, the thought of messing with code might make you want to close this page immediately. But stick with me. This takes 10 minutes, requires zero technical knowledge, and I've tested these exact steps myself yesterday to make sure they work and found some really cool quirks that a non-coder, like me and maybe even you, that will make this far easier!

Why bother? Because customers who can see exactly where you are on a map are far more likely to trust you're a real, local florist. Not some faceless online overseas operation like some players in Australia are. Plus, Google loves it when your map embedding matches your Google Business Profile. It's a simple trust signal that costs nothing but a few minutes of your time. It could be a rankings bonanza for you.

Ready? Let's get your map sorted.

Step 1 - Find Your Business On Google

Yes, Google your business. By now I am assuming you have a Google Business Profile.

Step 2 - Located Your Listing

Locate your listing, it's generally located next to the map like in the example below.

Screenshot of Google search results showing a florist's business listing prominently next to a map, with 'Open in Maps' button visible.

Then I want you to click on your listing, then click on the 'open in maps' button, within the map, which then should fire a new page.

Step 3 - Find Your Business Again

So, now you should have a new page, I want you to click on your listing again, which should pop a new page with all your business details on it like the below example.

Screenshot showing a detailed Google Business Profile page for a florist, displaying address, hours, photos, and a prominent 'Share' button.

Step 4 - Find the Share Button

Where all your business details are listed there will be a share button, click on that. A popup will appear.

Then click on the Embed a map button.

Then on the 'copy to html' button.

Screenshot of Google Maps 'Share' popup, with 'Embed a map' tab selected and 'Copy HTML' button highlighted.

Step 5 - Go to Your Contact Us Page

I want you, assuming you have access to it, to find your contact us page in your websites' admin. Now, this may seem super technical but really it's not so just do your best to follow my simple instructions.

Under your existing address or some place on the page where you would ideally want the map. I want you to click in that area and type with word xmas, I know, it sounds weird, but stay with me as it will all make sense.

Then, you need to find a little button or icon. It's normally around the toolbar area where you can change the font, colours or headings. It should look something like the below depending on what platform you are using:

  • < >
  • </>
  • Custom HTML
  • HTML
  • Source
  • Embed HTML

Push that button or icon.

Then, it's all going to look really, really weird and maybe a little overwhelming, I know, I get it but hang in there.

I want you to first hold down the control button and then push 'F' at the same time. A little search box should appear in your browser.

In that search box, type the word xmas again, then push enter. You should now see, in all that mess, in yellow or some colour where you typed xmas.

Then I want you, with your mouse or whatever, select xmas, but also any other weird stuff either side of it, maybe it's a <p> or something similar.

Then push and hold down the control button, then push 'V''. This now should have pasted a wacky looking code, which you copied a few steps back. This is your map and should look like this example:

Screenshot showing example HTML code for an embedded Google Map, with 'width' and 'height' attributes highlighted for modification.

Fret not, we just need to make 2 tiny changes to that code now.

In the code, you are looking for two numbers. One is the width number and the other is the height number.

  1. Change the width= number from 600 to 100%. Yes, a percent. This means that, not matter what device, be it iPad, any screen size, or any phone this change makes the map 'responsive'. In simple terms, the map will always go as wide as the screen size of your florist shop customers device, and automatically.
  2. Change the height= from 450 to, in my experience, 250. This will give your map a more slimlined look. If you feel it's too thin, try 300, or 350. You can do whatever you like.

Once you have done that, you will need to hit the 'save' or the like button in your admin, this will save all the hard work you have just done. Again, if you want to change the height of the map, you can do this by following the above step. This time though, rather than search for xmas, you can search for height.

That's It, You're Done!

Look, I know that might have seemed like a lot of steps, but you've just done something that most florists never get around to doing. Your contact page now has a proper, responsive Google Map that works on every device, from massive desktop screens to tiny phones like the iPhone mini my Mum adores.

The best part about your new skill? This map you just put on your website automatically updates if you ever change your Google Business hours, add holiday closures, or update your photos. It's all connected to your Google Business Profile, so you never have to touch it again.

FAQ

Why would embedding a Google Map help my SEO rankings specifically?

Look, it's basically about matching things up. You've got your Google Business Profile, right? And when the map on your contact page shows the exact same address, same spot, Google goes "okay, these people are legit". They can see your website, your shopfront, your listing - it all lines up.

Does it rocket you to number one? Nah. But it's one of those things that adds up with a bunch of other stuff. Someone searches "florist near me" or whatever, and you're ticking that box.

Honestly though, the main thing is customers just trust you more. They can see where you actually are, chuck the address straight into their phone, get directions without bouncing off to another tab. Makes you look real, you know?

What if I can't find the HTML or source code button in my website editor?

Yeah, every platform stuffs this away in a different spot. WordPress usually has a "Text" or "Code" button somewhere (instead of the "Visual" one). Wix hides it under "Add" then you dig through to "Embed" or something with iframe in the name. Squarespace calls it "Code Block". Shopify just says "HTML" when you're mucking around with pages.

Some of the really locked-down site builders... they just don't let you.

Will this work if my business address is a PO Box or I work from home?

Running things from home and don't want randoms knowing your address? Yeah, fair enough. Gets a bit complicated though.

Google lets you set up as a service area business - you hide your actual address and just show which suburbs you cover. But then you can't really embed a map with a pin, because there's no public address to show. Bit of a catch-22.

What some people do is show their service area on the Google listing, then on the website just put a general area map or list out the suburbs you service. You lose some of that verification stuff but at least you're not broadcasting your home address to the internet.

PO Boxes though - Google won't have it. They want a physical location where people can actually rock up, or you need to register as service area. If you've got a PO Box on your listing right now... that's technically against their rules. They could suspend you for it.

How do I know if the map is actually working after I save it?

Just open your contact page like a normal person would. New browser window, or check it on your phone. You should see the map, be able to zoom around, click for directions, all that.

Blank space? Broken image? Something's stuffed up with the code.

Usually what happens is people accidentally delete part of the embed code when they're replacing that xmas placeholder text. I've done it myself. Go back, try again, make sure you're only swapping out the xmas bit and maybe the tags right around it like <p>xmas</p>, not your whole page code.

Still broken? Screenshot it. Any local web dev can sort it in like 30 seconds, or just ping your website platform's support team.

What's the difference between just linking to Google Maps versus embedding it like this?

A text link - "click here for directions" or whatever - sends people off to Google Maps. They're gone. Might not come back. Extra click, extra hassle.

Embedded map keeps them on your site. They can zoom around, check your hours (if you've set them up on Google), look at photos, even read reviews sometimes. All without leaving. Google notices when people hang around your site longer, too.

And it just looks more legit, you know? The embedded map proves your Google Business Profile exists, it matches up with everything else. A link is just... text. You'd have to remember to update it manually if anything changes. The map updates itself automatically when you change stuff on Google.

Works on mobile too, which - yeah, most people are on their phones anyway.

Comments

No posts found

Write a review