how to change width google maps

[Simo]

Hi,
I've created a google maps link inserting this html code into a page :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2796.4628770728004!2d8.96844131577428!3d45.50075997910145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786ec4ea4f2d2cf%3A0x7a027c55bd4fc64c!2sAutoassistenza+Cicero+Di+Cicero+Benito!5e0!3m2!1sit!2sit!4v1476882184846" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

I would to extend my maps until the end of the page border, leaving no white border.
How is possible?
Thanks for support.

http://officinacicero.com

[malycom]

Try changing width to 100% instead og 600 so it would look something like width="100%" height="450" - Change height to wahtever.

[Simo]

HI malycom,
thanks for your reply!

I tried to change width into 100% but there are always a small part of border..
this is the code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2796.4628770728!2d8.968441315774268!3d45.50075997910146!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786ec4ea4f2d2cf%3A0x7a027c55bd4fc64c!2sAutoassistenza+Cicero+Di+Cicero+Benito!5e0!3m2!1sit!2sit!4v1475762975532" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen ></iframe>

[carasmo]

http://embedresponsively.com/

---

Genesis Theme Customization and Help

[Simo]

Thanks Carasmo,
It does not work, it is always a space between the edge of the page and the end of the map.
I want an effect like the map at the end of the site in the following link..http: //corsa.us-themes.com/#home

[carasmo]

Then you locate what is keeping the width constrained (.wrap) and use CSS to specify new widths and display values AND you use the responsive embed code.

This CSS goes at the very bottom of your child theme stye.css file out side of other declaration blocks. Use FTP and a code editor.

.front-page-7 .flexible-widgets {
    display: block;
}

.front-page-7 .wrap {
    max-width: none;
}

.front-page-7 .image-section .widget-area {
    display: block;
}

.front-page-7 .flexible-widgets {
    padding-bottom: 0;
    padding-top: 0;
}

---

Genesis Theme Customization and Help

[Simo]

Dear Carasmo,
Now everything is working properly, thanks!
Can I ask why you suggest I use the responsive embed code and not the standard code of google maps and then edit the parameters of the width?
I tried with both the codes and now, after entering the code inside the style.css file, both works.

Thanks for your help

[carasmo]

Both works, but one is fluid / responsive the other is just the width.

---

Genesis Theme Customization and Help

[Author]

Posts