Ambiera Forum

Discussions, Help and Support.

Ambiera Forum > RocketCake
Responsive Google map.

alanbeasy
Registered User
Quote
2019-05-29 11:25:05

Below is the code for a responsive Google map (inserted in a HTML Code container from the Toolset.

The properties of my HTML Code Container are:

Alignment: centre

Border: Solid color
Border Width: 1
Corners: Angular
Position Type: Normal
Size: 75%, auto
MinWidth: none
MaxWidth: none
VerticalAlignment: Bottom
Float: none
Margin: 10, 0, 20, 0

=======================
Insert the code below

You can adjust the 75% padding in the code below as required for your personal aspect ratio – but be careful to save your .rcd before you experiment.

(replace the code under <div class="google-maps">
with your own code from google maps)
=========================

<style>
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>



<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3130.732928371174!2d142.47843160034495!3d-.........

............ etc for your Google map after you click on "share" and select "embed map" then copy the code.....

mapSt%2C+Warrnambool+VIC+3280!5e0!3m2!1sen!2sau!4v1558682989535!5m2!1sen!2sau" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>


================
Cheers


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Int?rnational" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact