Tagged: , , , ,

Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
    Posts
  • October 7, 2013 at 1:44 am #171384
    Jens

    Hi,

    how could I “setup” the Google Maps Plugin in true Fullwidth?
    I use the Fullwidth Site Layout, but the Plugin in Boxed. So
    the 100% width doesn’t really work out. What can I do?

    Also I like to deactivate the Mouse Wheel interaction. How?
    Currently it changes the Zoom-Level, while I scroll the site.
    This could be a complicated task for a low-level user :)

    Greez Jens

    October 8, 2013 at 9:49 am #172120
    Dude

    Hi Jens!

    Which google maps plugin are you using? If you use the http://www.wpgmaps.com/ plugin you can deactivate it on the options page ( Maps > Settings and check the “Disable Mouse Dragging”). If you’re using the default widget you need to modify the theme code: https://kriesi.at/support/topic/full-width-google-maps/#post-135567

    To add a fullwidth map to your website you need to stretch a section element to 100%. Use the section id or class (see: https://kriesi.at/support/topic/add-a-anker-shortcode-template-to-avia-layout-builder/ ) to stretch the section with css code – i.e. use following css code

    
.mycustomsection{
width: 100%;
}

    Then add a texblock element into the section and paste your shortcode into the texblock editor field.

    Regards,
    Peter

    October 22, 2013 at 5:58 pm #179157
    Fabienml

    Hi guys,

    I tried the previous trick with WP Google Maps but it doesn’t make it.

    Could i have a bit of a help ?

    http://zebre.zebre-studio.fr/contact/

    Thanks a lot,

    Cheers,

    October 24, 2013 at 5:04 pm #180323
    Devin

    Hi!

    You need to target that #map and then the container inside of it as well:

    #map .container {
    width: 100%;
    padding: 0;
    margin: 0;
}
#top #main #map.avia-section .template-page {
    padding: 0;
}

    Best regards,
    Devin

    October 24, 2013 at 5:24 pm #180328
    Fabienml

    Allright Devin, it worked great with the enfold map widget. I gave up with WP Google Map.

    I still have a little padding-bottom underneath the map. Any idea?

    Awesome support guys, love my this Enfold theme.

    Cheers,

    October 26, 2013 at 3:32 am #180926
    Devin

    Then this will do it:

    #avia_google_maps-2 {
padding: 0;
}
    November 1, 2013 at 4:13 pm #183410
    Fabienml

    Hi Devin,

    I tried the code you sent but it didn’t worked.

    http://zebre.zebre-studio.fr

    Please check it,

    Thanks,

    Fabien

    November 2, 2013 at 4:24 am #183601
    Ismael

    Hey!

    Please use this:

    #avia_google_maps-2.widget {
padding-bottom: 0 !important;
}

    Cheers!
    Ismael

    January 25, 2014 at 10:49 pm #214906
    Thomas
    This reply has been marked as private.
    January 26, 2014 at 3:56 am #214942
    Ismael

    Hey!

    Add this on Quick CSS:

    #fullwidthmap .container {
width: 100%;
}

    I’m sorry but I don’t understand questions 2 and 3 clearly. Let me ask Dude.

    Cheers!
    Ismael

    January 26, 2014 at 9:19 am #214976
    Thomas

    Hi!
    Thanks for answer, but I already tried to add “#fullwidthmap .container { width: 100%; }” to Quick CSS without any change. It always looks the same.
    Any other idea?
    Bye Thomas

    January 26, 2014 at 4:19 pm #215025
    Dude

    Hey!

    Wenn du das “Klassen” Feld verwendest, musst du auch den CSS Code abwandeln – versuche

    
.fullwidthmap .container { width: 100% !important; }

    Best regards,
    Peter

    January 26, 2014 at 6:39 pm #215043
    Thomas

    Hi!
    Leider keine Änderung. Kann ich Dir Zugangsdaten schicken, damit Du es dir anschaust?
    Vielen Dank,
    lg Thomas

    January 26, 2014 at 6:43 pm #215044
    Dude

    Hey!

    Ja, bitte poste die Zugangsdaten als private reply und ich sehe mir die Sache an.

    Best regards,
    Peter

    January 26, 2014 at 7:02 pm #215050
    Thomas
    This reply has been marked as private.
    January 26, 2014 at 8:17 pm #215058
    Dude

    Hey!

    1) Ich habe das Problem gefunden. Du hast php code (add_theme_support() Funktion) in das Quick CSS Feld eingefügt. Dieser Code ist natürlich nicht css valide (sondern muss in die functions.php Datei) und hat daher auch den fullwidth Map Code beeinflusst. In das “benutzerdefinierte CSS Klasse” Feld bitte auch keinen CSS Code einfügen sondern nur CSS Klassen. Die kann man dann mittels CSS Code in der Child Theme style.css oder mittels Code im Quick CSS Feld ansprechen. Mehr zu css Klassen: http://www.css-lernen.net/css-klassen.php

    2) Ihr könnt probieren eine fullwidth Sektion zu erstellen (verwendet wieder die Sektion und gebt ihr die ID “fullwidthmap”) und dann zieht ein 2/3 Spalten Element und ein 1/3 Spalten Element hinein. In das 2/3 Element gebt dann die Slideshow und in das 1/3 Element könnt ihr zB eine Widget Area geben. Das Ergebnis wird dann sicher nicht so gut aussehen wie hier http://www.turracherhoehe.at/ , aber ein Versuch ist es wert.

    Cheers!
    Peter

    February 24, 2014 at 11:07 pm #228712
    simplefly
    This reply has been marked as private.
    February 25, 2014 at 6:02 am #228862
    Ismael

    Hey!

    Please add this on your custom.css or Quick CSS:

    .page-id-487 #main .container {
width: 100%;
}

.page-id-487 #main .container .template-page.content.twelve.alpha.units {
width: 100%;
}

    Best regards,
    Ismael

    February 25, 2014 at 6:09 am #228873
    simplefly
    This reply has been marked as private.
    February 26, 2014 at 5:55 pm #229664
    Devin

    Hi!

    What that user did was put the widget area inside of a color section. The color section is called “map” without quotes in the developers field when editing the color section. This allows you to then set its width with css.

    For example:

    #map .container {
    width: 100%;
    padding: 0;
    margin: 0;
}
#top #main #map.avia-section .template-page {
    padding: 0;
}

    Regards,
    Devin

    March 10, 2014 at 9:24 pm #234978
    simplefly

    Thanks. I did this and it worked well. However, how do I control the height of the map. I added the height to the #map container…it changed the height of the container but the map widget stayed the same height. Thanks.

    March 13, 2014 at 6:01 pm #237078
    simplefly

    Hi guys. Do you think you can please answer my question some time soon? I would really appreciate it. Thank.

    March 13, 2014 at 6:02 pm #237079
    Yigit

    Hi!

    Please update Enfold to the latest version 2.6.1 ( http://kriesi.at/documentation/enfold/updating-your-theme-files/ )
    new Google Maps Element was added as you can see here http://kriesi.at/themes/enfold/pages/contact/

    Regards,
    Yigit

    May 30, 2014 at 9:42 pm #272593
    CharlieBarey
    This reply has been marked as private.
    May 30, 2014 at 10:18 pm #272617
    Devin

    Hi @CharlieBarey ,

    That is what happens when you use any full width element on a page. Instead of using the fullwidth map element, add a widget area into your layout and then add the map widget to that widget area from the WordPress widgets manager.

    Cheers!
    Devin

    May 30, 2014 at 11:42 pm #272668
    CharlieBarey

    Ok, i understand. But i need to set more than one points over the map, and i cant with the map of WordPress widgets manage.
    Is there a way?

    May 31, 2014 at 6:25 pm #272806
    Kriesi

    Hi!

    Actually there is a much easier solution. just add a 1/1 column to your page and put the maps widget inside. it will no longer stretch across the fullwidth but only take up the space beside your sidebar :)

    Best regards,
    Kriesi

    June 1, 2014 at 9:26 pm #273028
    CharlieBarey

    Hi Kriesi! Thanks for that! http://guasunchos.com/
    However, I would love to use the full width map in the future, it is really the best choice in terms of design. I think that would be a very nice feature to improve! I know you can do it! :)

  • Author
    Posts
Viewing 28 posts - 1 through 28 (of 28 total)
  • The topic ‘Google Maps in true Fullwidth and without Mouse Wheel interaction’ is closed to new replies.