Google maps in RLM - Post ID 235282

User 1900985 Photo


Registered User
27 posts

The Google Map Builder mentioned below is a great way to make a map. It works and looks great on a simple HTML page, but getting it to display in an RLM layout is another story (at least for me it is). Any suggestions?
User 187934 Photo


Senior Advisor
18,798 posts
Online Now

Hi Stephen,
Can you provide a link to your page so we can see the issue?:)
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 1900985 Photo


Registered User
27 posts

Unfortunately, I am unable to provide a link at this time, and I'm sorry if I misled. What I meant to say is I can't get the map to be responsive. It shows up ok, but it's not responsive like the other elements on the page.
User 187934 Photo


Senior Advisor
18,798 posts
Online Now

Take a look at this.
http://www.coffeecup.com/help/articles/ … out-maker/
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 1900985 Photo


Registered User
27 posts

That's different.

The map builder at https://www.mapbuildr.com/buildr creates the code for a javascript map, and that kind of map is superior to the one mentioned in your article.

I may be wrong but I don't think it's possible to put all of that javascript inside an iframe.
User 271657 Photo


Administrator
3,816 posts

I noticed the map builder is still in beta testing.
Dumb question... but did you change the size of your map (in the mapbuilder) to percentages rather than pixels?
Have you tried just using a place-holder in RLM, then adding the code and styling for the map in the actual website files?
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

Whether or not you use percentages or pixels makes no difference. Also, I have been placing the scripts (there are two) and the styling in the head of the document and then the following... <div id='google-map'></div> ...in the location in the body of the document where I want the map to display.

The map displays just fine. It's just that it's not responsive.

Are you suggesting I can use some kind of place-holder in the body of the document where I want the map to display and place the scripts and styling, etc. in it and that might make the map responsive?
User 271657 Photo


Administrator
3,816 posts

Yes, I place maps in their own <div>. The styles go into the linked CSS file. I know nothing about the map builder maps, but using the regular map code snippet, they look something like this (it's half the page width at full-screen and goes to 100% width/no float on small screens:
HTML:
<div class="maplarge floatright">
<iframe src="https://www.google.com/map........width="100%" height="300" frameborder="0" style="border:0"></iframe>
</div>
CSS:
.maplarge {
width: 50%;
height: auto;
max-width: 700px;
min-height: 300px;
margin: 25px 0 0 0;
}

Other pages on the same site have a smaller map in the footer, they're held within a flexbox section (with only the Iframe dimensions specified) to control the map.:
<div class="section3">
<iframe width="100%" min-height="290"........
</div>
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 271657 Photo


Administrator
3,816 posts

Another thought... if you have other scripts on the page, maybe something is in conflict?
Hard to tell without seeing the code. ;)
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

No, that's apple and oranges.

The Map Builder map is a javascript map that ultimately comes from ... https://maps.googleapis.com/maps/api/js ...

The most difficult thing you have to do is go to Google and get an API key before you can use the form on the Map Builder site to create your map.

After you finish with the various form fields, you just click on the "Get Code" button and copy the code for your own web page. It's really quite simple and can be done in less than 10 minutes if you're not too picky. The only problem I've run into so far is getting the map to be responsive.

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.