Google maps in RLM - Page 2 - Post ID...

User 2484360 Photo


Registered User
3,293 posts

I have found that this is a very helpful little tool.
http://embedresponsively.com
Not sure if it would work on a JavaScript driven Google Map, but give it a try and let us know! :)
User 187934 Photo


Senior Advisor
18,828 posts
Online Now

I came up with this.
http://ericrohloff.com/coffeecup/rlm/map_test/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
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 271657 Photo


Administrator
3,816 posts

Except for all the scripts in the head, that's how I've done mine. A div class to hold the map within the page, and same as Eric's example; a percentage width: 100% and a max-width, a min-height and whatever media querie adjustments might be needed.
Just tried the MapBuilder, worked just fine (even without any media queries).
<div class="col span_6_of_12">
<div id='test'></div>
</div>

Stephen, did you get it working yet?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2088758 Photo


Senior Advisor
2,740 posts

Here is what i did and its quite responsive :)

CSS
.cc-map-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.cc-map-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML

<div class="cc-map-wrapper"><iframe src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d5067.578420981123!2d-105.58042655!3d50.575282949999604!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e6!4m0!4m5!1s0x531bc1c285a96337%3A0x4dbd9f3cdda8d383!2sTuxford%2C+SK+S0H!3m2!1d50.575716899999996!2d-105.58242299999999!5e0!3m2!1sen!2sca!4v1398147829516" 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 271657 Photo


Administrator
3,816 posts

Steve, did you use http://embedresponsively.com? The bottom padding looks like their thing. Same for Youtube videos.
The standard Google maps are easily responsive, but Stephen wants to use their new MapBuilder version.
Have a look at the code behind Eric's example and you'll see it's quite different.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 1900985 Photo


Registered User
27 posts

I'm not sure what it was, but Eric and paintbrush set me on the right track. THANKS!!!:)
User 271657 Photo


Administrator
3,816 posts

Good to hear you have it figured out :D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.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.