google maps suggestions

User 332337 Photo


Registered User
120 posts

Including a Google map that for some reason is just not acting like I am expecting. It seems to be too thin for the width on the bigger breakpoint, then a bit too wide for the mobile breakpoint. Is there a place to reset this formatting control or delete and start over?

The code generated from the share map on Google maps - defines a size, should this be changed from pixel to percent? Can I do that easily enough, or does it goof up the whole display thing?

Any suggestions for the simplest way to add to my site with designer? Container Div - with layout determinations ( auto, left and right option applied?

Sorry for being all over the place, I am so close to having this site completed.

-K
User 187934 Photo


Senior Advisor
20,188 posts

Hi K,
Can you share your project so we know what were looking at to advise easier?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,086 posts

Try adding this to your html element but replace the bolded iframe with your own:

<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>

<div class="google-maps">

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>

</div>
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 332337 Photo


Registered User
120 posts

Steve - GENIUS with that code!

Works perfectly. Thank you for your time.
User 2088758 Photo


Senior Advisor
3,086 posts

Glad you got it working!
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
20,188 posts

I made a component to make it easier to use in SD. No need for any additional css.
Attachments:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 332337 Photo


Registered User
120 posts

Eric - thank you, how do I add this to an existing site?
User 187934 Photo


Senior Advisor
20,188 posts

Open the file in SD.
Right Click on the html Element.
Select Create Component.
Then Click on the grey Up arrow on the right hand panel that opens and Export Project Component to library.
It will now be available to use in all of your SD projects.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 332337 Photo


Registered User
120 posts

Eric - easy enough. Your project has 3 different google map options. Am I seeing that correctly? Looked like two of them had a fixed size as well?

User 187934 Photo


Senior Advisor
20,188 posts

You should be able to control the map size by controlling the div that you drop the html into.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.