I’ve been trying to get a custom map added using the “Map” visual composer element that would have something other than the default proportions – a Google Map iframe with a 1:2 x:y ratio. Ideally, that map element would fit in the left-most of an equal three-column setup. Beyond that, I’m not terribly picky – it could be responsive, or if needed it could be a static size. I’ve tried any number of things mentioned in the forums with CSS, and am obviously missing something important.

Ideally this would be done in visual composer, but I’ll welcome the fix any way it makes sense…

Thanks in advance for your help!
Bob

Were you able to resolve your issue? If not, could you please provide us with a URL to the page that you’re you need to adjust.

Thanks!

http://testserver.minneapolisriverfrontpartnership.org/?page_id=627

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

I would like something similar to this, with a couple footnotes/additions:
(1) Body text would go to the left of the map.
(2) A site-wide header across the top.
(3) I would like it to be fully responsive, in the way the X theme generally is. In other words, when I shrink the window down past a certain size, the map would shift to be below any text I put to the left of the map, rather than simply getting proportionally smaller.

Switch to text-editor and paste the following code:

[vc_row][vc_column width="1/2"][custom_headline type="left" level="h1" looks_like="h1"]This is custom Headline[/custom_headline][vc_row_inner][vc_column_inner width="1/1"][text_output]Simple Text[/text_output][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width="1/2"][google_map zoom_control="true" no_container="true" lat="74.11" lng="73.24" zoom="3" height="450px"][/google_map][/vc_column][/vc_row]

You can then switch back to VC mode to edit as per your requirement. Let us know how this goes!

Your code gets me part of the way to what I need, with one very key exception. I want to embed a more complex Google map than the “Google Map” element allows. Mainly, I have a number of sets of custom datasets that I want to display each on a Google map, each on their own webpage. And I’d still like the ability to make those maps 700px high – because the geography for those data sets is vertical, not horizontal.

So, when I go to insert that kind of map using the plain old “Map” element in Visual Composer, pasting in a custom Google Map iframe code as the directions specify, it seems I’m stuck with a map that’s 450px high. So, what it seems I’d really like is a webpage like the one I created below using Visual composer, except using the “Map” element, not the “Google Map” element, so that I can use my custom maps.

http://testserver.minneapolisriverfrontpartnership.org/?page_id=656

Please try adding the following CSS code into your Customizer, Custom > CSS section.

#x-google-map-inner-1 {
    height: 750px;
}

Hope that helps.

So I think you misunderstand me. For clarity (not out of frustration), let me try to make my request as clear and simple as possible: I need a CSS class or id selector to make the map on this page 700px tall:
http://testserver.minneapolisriverfrontpartnership.org/?page_id=627

If that’s not possible, please let me know, or suggest an alternative.

Thanks!
Bob