Is there a way I can manually add a google map into my site?

Site URL: https://www.downtoearthadventures.com/

Hi, 

I added a google map to this site specifically so people could see the reviews that have been left on google maps. I added an Embed block and messed with the URL until it showed the correct business on the map (there are others with a similar name) 

When I checked back a few weeks later, I realized that the site had now linked to the wrong business somehow!

I don't want to use the maps block because I need it to include the 5 star rating with link to reviews the way using the embed block does, but now when I insert the URL it directs to a totally different business (with a similar name).

Any way for me to bypass the blocks and just manually add the map via CSS? Or anyone have any other ideas? 

Thanks!

Site: Downtoearthadventures.com

What I want to link: https://goo.gl/maps/JfyfmYcd3PhQhNux9

CSS does not add structure to a site. It is for changing the style of elements.

Adding a map is adding structure so you need to use an embed code and/or Javascript, in a code block or other place in SS that accepts it.

Hi @creedonI'm wondering if you have any ideas about how to solve this issue. Every time I embed the google map, I paste the correct link to the correct business, but it eventually changes itself to another business with the same or similar name in another location. Is this something that can be avoided? 

You can take a look at downtoearthadventures.com, map is at the bottom. The actual map is in the correct place(it shows Wales), but the business says "Earth Adventures Unlimited" in Fort Wayne, IN instead of "Down to Earth Adventures Ltd" in Wales, UK. 

Any ideas would be much appreciated.

@zala

Without knowing the whole process how you got the map onto your page I can only make guesses.

I can see the end result though.

@creedon I used the embed block. The address I used was the one that comes up when I click "share" on the business' google maps page / "send a link".

I just tried something new that seems to have worked. I used the code block and entered the "embed a map" iframe link. You just have to make sure you're zoomed exactly where you want to be before you click the "share" button to get the link. Hopefully the map doesn't change on me the way it has using the embed block. 

Quote

I just tried something new that seems to have worked.

Excellent! Let us know how it goes.

On 8/1/2021 at 7:00 PM, creedon said:

Excellent! Let us know how it goes.

Well it seems to work well in terms of the map showing the correct place consistently, but the size is not responsive. Any ideas how to make this resize with the page?

I attached the code I pasted in from Google maps and an example of what it's doing on a narrow page currently. 

On 8/21/2021 at 9:36 AM, zala said:

Well it seems to work well in terms of the map showing the correct place consistently, but the size is not responsive. Any ideas how to make this resize with the page?

I attached the code I pasted in from Google maps and an example of what it's doing on a narrow page currently. 

@creedon Any idea about how to fix this? Thanks!

@zala @smoosie

I don't have a solution at this time but I may be able to get you both closer to a better result. Using zala's iframe as an example.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d616127.4414088868!2d-4.41238464687687!3d52.898964029887786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4f2ead4049e858af%3A0x71d71e627e03cf1d!2sDown%20To%20Earth%20Adventures%20Ltd!5e0!3m2!1sen!2sus!4v1627856942250!5m2!1sen!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Remove the height and width attributes.

width="600" height="450"

Change the style attribute to the following.

style="border : 0; min-height : 450px; width : 100%;"

For zala's case it is important to keep the width set to 100% so that as the viewport width changes the map width will change and not overlap the content to the right. The min-height can be played with but the original 450px seems to be pretty good overall.

Let us know how it goes.

@creedonThat worked! Thank you!! (I'm working on the same site as zala)