http://embedresponsively.com
Not sure if it would work on a JavaScript driven Google Map, but give it a try and let us know!
Adam East
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!
http://embedresponsively.com
Not sure if it would work on a JavaScript driven Google Map, but give it a try and let us know!
Eric Rohloff
Senior Advisor
20,245 posts
I came up with this.
http://ericrohloff.com/coffeecup/rlm/map_test/
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.
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
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
paintbrush
Ambassador
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?
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
https://www.callendales.com
Steve
Senior Advisor
3,106 posts
Here is what i did and its quite responsive
CSS
HTML
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%;
}
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
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
paintbrush
Ambassador
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.
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
https://www.callendales.com
Stephen Flakus
Registered User
27 posts
I'm not sure what it was, but Eric and paintbrush set me on the right track. THANKS!!!
paintbrush
Ambassador
3,816 posts
Good to hear you have it figured out 
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
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.
