Google map in a content slider? -...

User 2110889 Photo


Registered User
17 posts

Anyone tried putting a Google map in a content slider? I don't see a simple way to add html to a container within RCS. I'm wondering if I could create an animated container in RCS, leave it empty, and then add the code after exporting the slider? Or, what I'm really wondering, is if anyone has this one figured out so I can steal your idea. I won't really steal the idea, I just want to borrow it for awhile...
If at first you don't succeed, get a bigger hammer.
http://www.photophart.com
User 187934 Photo


Senior Advisor
20,181 posts

Give it a try. Swap out an existing element with your google map code. I was hoping they would include an html element in a future release.
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 2110889 Photo


Registered User
17 posts

Well, As it turns out this does work. I created a content container in a slide and put a picture link in the container. Then exported the slide show for embedding. The code with the container and the picture looks like this:

<!--% Start of the content for CoffeeCup Responsive Content Slider %-->
Lots Of Code Here....
<div class="slider-container container-map1" data-animation-in="rotateInDownRight" data-animation-out="zoomOutUp">
<a class="responsive-slider-picture picture-link-1" href="%3Ca%20href=%22https://maps.google.com/maps?f=q&amp;amp;source=embed&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=1205+Ryan's+Road,+Worthington,+MN&amp;amp;aq=0&amp;amp;oq=1205+ryans+r">
<picture><img alt="Placeholder Picture" srcset="./drscott-contact-bottomslides/img/picture-7.svg"></img>
</picture>
</a>
</div>
Lots More Code Here
<!--% End of the content for CoffeeCup Responsive Content Slider %-->

With the "<a href" part being an attempt at a link that didn't work.
I replaced that code to look like this:

<div class="slider-container container-map1" data-animation-in="zoomInUp" data-animation-out="zoomOutUp">
<!-- Google Map -->
<iframe width="100%" height="360" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1205+Ryan's+Road,+Worthington,+MN&amp;aq=0&amp;oq=1205+ryans+rd&amp;sll=44.2127,-100.247164&amp;sspn=6.77175,12.392578&amp;ie=UTF8&amp;hq=&amp;hnear=Ryan's+Rd,+Worthington,+Nobles,+Minnesota+56187&amp;t=m&amp;z=14&amp;ll=43.634826,-95.596094&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=1205+Ryan's+Road,+Worthington,+MN&amp;aq=0&amp;oq=1205+ryans+rd&amp;sll=44.2127,-100.247164&amp;sspn=6.77175,12.392578&amp;ie=UTF8&amp;hq=&amp;hnear=Ryan's+Rd,+Worthington,+Nobles,+Minnesota+56187&amp;t=m&amp;z=14&amp;ll=43.634826,-95.596094" style="color:#0000FF;text-align:left">View Larger Map</a>
<!-- End Google Map -->
</div>

Just replaced the <a class="responsive-slider-picture picture-link-1" with the google map code and that works. Haven't tried it at different break points yet, but it looks like it's doable. May have to mess with the .css a bit, we'll see.

If at first you don't succeed, get a bigger hammer.
http://www.photophart.com
User 232214 Photo


COO
827 posts

Eric Rohloff wrote:
I was hoping they would include an html element in a future release.

Noted, will do :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 187934 Photo


Senior Advisor
20,181 posts

Bob Visser wrote:
Eric Rohloff wrote:
I was hoping they would include an html element in a future release.

Noted, will do :P

+1000. This would be awesome as you could use the formbuilder to add content.:cool:
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 2110889 Photo


Registered User
17 posts

There's a wrinkle in the fabric of the universe with this approach that I don't seem to be able to get ironed out. Pasting the Google map code into the animated container destroys other element's animations. If I remove the map code and just leave the container empty the other element's animations return. It seems that any animation that occurs after the map container animation gets clobbered. Will try animating the map container last and see what happens.
If at first you don't succeed, get a bigger hammer.
http://www.photophart.com
User 2110889 Photo


Registered User
17 posts

For what it's worth...Here's a link to a live contact page I'm working on with the Google map code pasted into a blank animated container in a RCS slide. Things are pretty busy on this page right now and it is no where near finished plus I haven't even started on responsifying the page yet so don't try and access it from your phone or tablet because the feet get a bit scrunched and weird looking. There are a total of 4 slides at work here. First, a top and bottom slide load and do their thing. Sixty seconds later a second top and bottom slide load with slightly different animations. Considering it started as an experiment, I'd say it is coming together fairly well so far.
Link: http://www.drscotthoffman.com/contact.html
If at first you don't succeed, get a bigger hammer.
http://www.photophart.com
User 2526084 Photo


Registered User
65 posts

photophart wrote:
For what it's worth... I'd say it is coming together fairly well so far.
Link: http://www.drscotthoffman.com/contact.html

Tested your page at various sizes and everything is responsive to the browser window. Slide operates as you described, nice piece of work, your definitely at a higher learning level than I'm presently at with Responsive Content Slider.

http://risk-assessments.org - Designed and Developed in CoffeeCup's Responsive Site Designer.

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.