Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #1440102

    Hi,

    I used the ‘avf_gmap_vars’ filter to add custom google map styles but it’s not working. It’s correctly printed to the frontend via AviaHelper::print_javascript but the styling doesn’t change. What’s the best way to add custom styling (snazzy maps – snazzy maps plugin is NOT an option!)

    All the best,
    Patrick

    #1440218

    Hey Patrick,
    Please post the code that you are trying to use, I don’t see this as an available filter in our documentation, in the theme files it seems to only get the map api and doesn’t seem to apply to map style.

    Best regards,
    Mike

    #1440219

    it is in framework folder – php – class-gmaps.php line: 378 inside public function handler_wp_footer()

    #1440221

    Hi,
    Thanks Guenni007, what I meant is that it only seems to take the api key, do you see that it can be used to customize the map style?

    Best regards,
    Mike

    #1440253

    It writes the zoom level, etc. so I assumed that I can also set the styles attribute because it’s on the same level when the map gets initialized.

    All the best,
    Patrick

    #1440276

    Hi,
    Can you share the function that you are using, and I can ask the team about it.
    I assume that you want to change the map background-color, what other style are you tring to change?

    Best regards,
    Mike

    #1440292

    Hi Mike,

    I want to add snazzy map styles which is done by setting the styles attribute of google maps.

    add_filter( 'avf_gmap_vars', function($maps) {
        $snazzy = [
            [
                "featureType" => "all",
                "elementType" => "geometry",
                "stylers"     => [
                    [
                        "hue" => "#006cff"
                    ]
                ]
            ],
            [
                "featureType" => "all",
                "elementType" => "geometry.fill",
                "stylers"     => [
                    [
                        "hue" => "#006cff"
                    ]
                ]
            ],
            [
                "featureType" => "all",
                "elementType" => "labels.text",
                "stylers"     => [
                    [
                        "hue" => "#006cff"
                    ]
                ]
            ],
            [
                "featureType" => "all",
                "elementType" => "labels.icon",
                "stylers"     => [
                    [
                        "hue" => "#006cff"
                    ]
                ]
            ],
            [
                "featureType" => "landscape.man_made",
                "elementType" => "geometry",
                "stylers"     => [
                    [
                        "hue" => "#006cff"
                    ],
                    [
                        "saturation" => "100"
                    ]
                ]
            ],
            [
                "featureType" => "poi",
                "elementType" => "all",
                "stylers"     => [
                    [
                        "visibility" => "off"
                    ]
                ]
            ],
            [
                "featureType" => "road",
                "elementType" => "geometry",
                "stylers"     => [
                    [
                        "lightness" => 50
                    ],
                    [
                        "visibility" => "simplified"
                    ]
                ]
            ],
            [
                "featureType" => "road",
                "elementType" => "labels",
                "stylers"     => [
                    [
                        "visibility" => "simplified"
                    ]
                ]
            ],
            [
                "featureType" => "transit",
                "elementType" => "labels.text",
                "stylers"     => [
                    [
                        "visibility" => "off"
                    ]
                ]
            ]
        ];
    
        $maps['av_google_map']['av_gmap_0']['styles'] = $snazzy;
        return $maps;
    } );

    When I check window.av_google_map in dev tools everything is there correctly but it seems like it doesn’t get initialized.

    #1440336

    Hi,

    Thank you for the update.

    The filter should work with slight modifications to the enfold/framework/js/conditional_load/avia_google_maps_api.js file. Please look for this code around line 177:

    styles: this.$data.styles
    

    Replace it with:

    styles: typeof this.$data.styles === 'string' ? JSON.parse(this.$data.styles) : this.$data.styles
    

    Then look for this code in the avf_gmap_vars filter:

    $maps['av_google_map']['av_gmap_0']['styles'] = $snazzy;
    

    Replace it with:

    $maps['av_google_map']['av_gmap_0']['styles'] = json_encode($snazzy);
    

    You may need to temporarily disable the Enfold > Performance > File Compression settings after modifying the js file.

    Best regards,
    Ismael

    #1440337

    Hi Ismael,

    Thank you. It works :)
    Possible you put the changes into core with the next update?

    Thanks,
    Patrick

    #1440344

    Hi Ismael,

    I have another question. Is it possible to make the google map to work with borlabs cookie? I added the borlabs cookie shortcode arround the google map via the avf_in_shortcode_handler_prepare_content. If I don’t allow the cookie the map gets nicely blocked. When i press allow the map doesn’t load. I have to refresh the whole page so that the map loads again. Is there a way to fix that?

    You can check on the website I sent you before. There are two versions. One is added via a google iframe which works. The second is the enfold element. Would be nice if it work with the enfold element too.

    All the best,
    Patrick

    #1440347

    the json method is used by google maps api long time ( in the meantime there is a cloud console for that) . https://mapstyle.withgoogle.com/ – they use a very similar json code like your “snazzy” one for styling.

    is it possible to adapt that for the native google json?

    Edit: it works with the google json aswell. In this case i do not name it snazzy.

    But you had to edit a bit that output code of google json !

    Changes in avia_google_maps_api.js are the same – and because it is set by a ternary operator there is nothing to stop it being included for the next release – right?

    f.e.:

    add_filter( 'avf_gmap_vars', function($maps) {
    $googleStyles = 
    
    // here is the place to insert the edited google styling json
    // all curly brackets had to be changed to square brackets - and the ":"     had to be replaced by: "=>"
    
    [
      [
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#ebe3cd"
          ]
        ]
      ],
      [
        "elementType"=> "labels.text.fill",
        "stylers"=> [
          [
            "color"=> "#523735"
          ]
        ]
      ],
      [
        "elementType"=> "labels.text.stroke",
        "stylers"=> [
          [
            "color"=> "#f5f1e6"
          ]
        ]
      ],
      [
        "featureType"=> "administrative",
        "elementType"=> "geometry.stroke",
        "stylers"=> [
          [
            "color"=> "#c9b2a6"
          ]
        ]
      ],
      [
        "featureType"=> "administrative.land_parcel",
        "elementType"=> "geometry.stroke",
        "stylers"=> [
          [
            "color"=> "#dcd2be"
          ]
        ]
      ],
      [
        "featureType"=> "administrative.land_parcel",
        "elementType"=> "labels.text.fill",
        "stylers"=> [
          [
            "color"=> "#ae9e90"
          ]
        ]
      ],
      [
        "featureType"=> "landscape.natural",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#dfd2ae"
          ]
        ]
      ],
      [
        "featureType"=> "poi",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#dfd2ae"
          ]
        ]
      ],
      [
        "featureType"=> "poi",
        "elementType"=> "labels.text.fill",
        "stylers"=> [
          [
            "color"=> "#93817c"
          ]
        ]
      ],
      [
        "featureType"=> "poi.park",
        "elementType"=> "geometry.fill",
        "stylers"=> [
          [
            "color"=> "#a5b076"
          ]
        ]
      ],
      [
        "featureType"=> "poi.park",
        "elementType"=> "labels.text.fill",
        "stylers"=> [
          [
            "color"=> "#447530"
          ]
        ]
      ],
      [
        "featureType"=> "road",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#f5f1e6"
          ]
        ]
      ],
      [
        "featureType"=> "road.arterial",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#fdfcf8"
          ]
        ]
      ],
      [
        "featureType"=> "road.highway",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#f8c967"
          ]
        ]
      ],
      [
        "featureType"=> "road.highway",
        "elementType"=> "geometry.stroke",
        "stylers"=> [
          [
            "color"=> "#e9bc62"
          ]
        ]
      ],
      [
        "featureType"=> "road.highway.controlled_access",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#e98d58"
          ]
        ]
      ],
      [
        "featureType"=> "road.highway.controlled_access",
        "elementType"=> "geometry.stroke",
        "stylers"=> [
          [
            "color"=> "#db8555"
          ]
        ]
      ],
      [
        "featureType"=> "road.local",
        "elementType"=> "labels.text.fill",
        "stylers"=> [
          [
            "color"=> "#806b63"
          ]
        ]
      ],
      [
        "featureType"=> "transit.line",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#dfd2ae"
          ]
        ]
      ],
      [
        "featureType"=> "transit.line",
        "elementType"=> "labels.text.fill",
        "stylers"=> [
          [
            "color"=> "#8f7d77"
          ]
        ]
      ],
      [
        "featureType"=> "transit.line",
        "elementType"=> "labels.text.stroke",
        "stylers"=> [
          [
            "color"=> "#ebe3cd"
          ]
        ]
      ],
      [
        "featureType"=> "transit.station",
        "elementType"=> "geometry",
        "stylers"=> [
          [
            "color"=> "#dfd2ae"
          ]
        ]
      ],
      [
        "featureType"=> "water",
        "elementType"=> "geometry.fill",
        "stylers"=> [
          [
            "color"=> "#3300ff"
          ],
          [
            "lightness"=> 40
          ]
        ]
      ],
      [
        "featureType"=> "water",
        "elementType"=> "labels.text.fill",
        "stylers"=> [
          [
            "color"=> "#ffffff"
          ]
        ]
      ]
    ]
    // end of insertion
    
    ;
        $maps['av_google_map']['av_gmap_0']['styles'] = json_encode($googleStyles);
        return $maps;
    });
    • This reply was modified 5 months, 3 weeks ago by Guenni007.
    • This reply was modified 5 months, 3 weeks ago by Guenni007.
    #1440350

    it works in this manner with google json:

    by the way Patrick : the original snazzy json code (https://snazzymaps.com/) is similar to google code – so where did you get your snazzy code?

    add_filter( 'avf_gmap_vars', function($maps) {
    $googleStyles = 
    
    // here is the place to insert the edited google styling json
    //  all curly brackets had to be changed to square brackets
    //  and the ":"     had to be replaced by: "=>"
    
            // edited google json code comes here from : https://mapstyle.withgoogle.com/
    
    // end of insertion
    
    ;
        $maps['av_google_map']['av_gmap_0']['styles'] = json_encode($googleStyles);
        return $maps;
    });
    #1440354

    I got a json file:

    [
        {
            "featureType": "all",
            "elementType": "geometry",
            "stylers": [
                {
                    "hue": "#006cff"
                }
            ]
        },
        {
            "featureType": "all",
            "elementType": "geometry.fill",
            "stylers": [
                {
                    "hue": "#006cff"
                }
            ]
        },
        {
            "featureType": "all",
            "elementType": "labels.text",
            "stylers": [
                {
                    "hue": "#006cff"
                }
            ]
        },
        {
            "featureType": "all",
            "elementType": "labels.icon",
            "stylers": [
                {
                    "hue": "#006cff"
                }
            ]
        },
        {
            "featureType": "landscape.man_made",
            "elementType": "geometry",
            "stylers": [
                {
                    "hue": "#006cff"
                },
                {
                    "saturation": "100"
                }
            ]
        },
        {
            "featureType": "poi",
            "elementType": "all",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "geometry",
            "stylers": [
                {
                    "lightness": 50
                },
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "labels",
            "stylers": [
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "transit",
            "elementType": "labels.text",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        }
    ]

    I added that first as a string in the filter but it didn’t work. So i changed it to array only. Did I miss something?

    #1440365

    that it will work – i wrote as comment above:

    //  all curly brackets had to be changed to square brackets
    //  and the ":"     had to be replaced by: "=>"

    so transformed is:

    [
        [
            "featureType"=> "all",
            "elementType"=> "geometry",
            "stylers"=> [
                [
                    "hue"=> "#006cff"
                ]
            ]
        ],
        [
            "featureType"=> "all",
            "elementType"=> "geometry.fill",
            "stylers"=> [
                [
                    "hue"=> "#006cff"
                ]
            ]
        ],
        [
            "featureType"=> "all",
            "elementType"=> "labels.text",
            "stylers"=> [
                [
                    "hue"=> "#006cff"
                ]
            ]
        ],
        [
            "featureType"=> "all",
            "elementType"=> "labels.icon",
            "stylers"=> [
                [
                    "hue"=> "#006cff"
                ]
            ]
        ],
        [
            "featureType"=> "landscape.man_made",
            "elementType"=> "geometry",
            "stylers"=> [
                [
                    "hue"=> "#006cff"
                ],
                [
                    "saturation"=> "100"
                ]
            ]
        ],
        [
            "featureType"=> "poi",
            "elementType"=> "all",
            "stylers"=> [
                [
                    "visibility"=> "off"
                ]
            ]
        ],
        [
            "featureType"=> "road",
            "elementType"=> "geometry",
            "stylers"=> [
                [
                    "lightness"=> 50
                ],
                [
                    "visibility"=> "simplified"
                ]
            ]
        ],
        [
            "featureType"=> "road",
            "elementType"=> "labels",
            "stylers"=> [
                [
                    "visibility"=> "simplified"
                ]
            ]
        ],
        [
            "featureType"=> "transit",
            "elementType"=> "labels.text",
            "stylers"=> [
                [
                    "visibility"=> "off"
                ]
            ]
        ]
    ]

    will result in: https://webers-testseite.de/enfold-map/

    #1440368

    complete Code to set into child-theme functions.php:
    ( the changings in avia_google_maps_api.js stayes the same)

    add_filter( 'avf_gmap_vars', function($maps) {
    $googleStyles = 
    	[
    		[
    			"featureType"=> "all",
    			"elementType"=> "geometry",
    			"stylers"=> [
    				[
    					"hue"=> "#006cff"
    				]
    			]
    		],
    		[
    			"featureType"=> "all",
    			"elementType"=> "geometry.fill",
    			"stylers"=> [
    				[
    					"hue"=> "#006cff"
    				]
    			]
    		],
    		[
    			"featureType"=> "all",
    			"elementType"=> "labels.text",
    			"stylers"=> [
    				[
    					"hue"=> "#006cff"
    				]
    			]
    		],
    		[
    			"featureType"=> "all",
    			"elementType"=> "labels.icon",
    			"stylers"=> [
    				[
    					"hue"=> "#006cff"
    				]
    			]
    		],
    		[
    			"featureType"=> "landscape.man_made",
    			"elementType"=> "geometry",
    			"stylers"=> [
    				[
    					"hue"=> "#006cff"
    				],
    				[
    					"saturation"=> "100"
    				]
    			]
    		],
    		[
    			"featureType"=> "poi",
    			"elementType"=> "all",
    			"stylers"=> [
    				[
    					"visibility"=> "off"
    				]
    			]
    		],
    		[
    			"featureType"=> "road",
    			"elementType"=> "geometry",
    			"stylers"=> [
    				[
    					"lightness"=> 50
    				],
    				[
    					"visibility"=> "simplified"
    				]
    			]
    		],
    		[
    			"featureType"=> "road",
    			"elementType"=> "labels",
    			"stylers"=> [
    				[
    					"visibility"=> "simplified"
    				]
    			]
    		],
    		[
    			"featureType"=> "transit",
    			"elementType"=> "labels.text",
    			"stylers"=> [
    				[
    					"visibility"=> "off"
    				]
    			]
    		]
    	]
    ;
        $maps['av_google_map']['av_gmap_0']['styles'] = json_encode($googleStyles);
        return $maps;
    });
    #1440369

    Hallo Günter,

    Ich wechsel kurz auf Deutsch weil ich mich da besser Ausdrücken kann :D

    Den Code den du mir jetzt geschickt hast ist ja schon der Code den ich so in Verwendung habe und der funktioniert auch. Ismael hatte nur Änderungen in im javascript gemacht (https://kriesi.at/support/topic/change-google-maps-styling/#post-1440336) und ich wollte nur wissen ob ihr diese Änderungen dann in den Core übernehmen könnt mit dem nächsten Update. Kann es sein, dass du https://kriesi.at/support/topic/change-google-maps-styling/#post-1440337 nicht gelesen hast? :D

    Oder reden wir gerade aneinander vorbei?

    Liebe Grüße
    Patrick

    #1440372

    doch ich las es;
    nur wollte ich im Gegenzug wissen wo dein snazzy json her kommt, denn wenn du dem Link zu snazzy folgst, und dort mal ein Styling durchspielst, dann erhält man am schluss auch wie bei Google einen json code, der geschweifte Klammern und Doppelpunkte enthält.
    Daher wollte ich wissen woher dein Snazzy Code kommt.

    Außerdem war mein Kommentar oben ja:

    Changes in avia_google_maps_api.js are the same – and because it is set by a ternary operator there is nothing to stop it being included for the next release – right?

    Es würde auf Grund der Verwendung eines ternären Operators jene die das Filter und diese Einstellungen nutzen auch nicht stören, wenn man es in Enfold aufnehmen würde.

    Da ich auch Borlabs Nutzer bin – wäre das sicherlich eine Bereicherung.

    #1440473

    Ok, dann hab ich es missverstanden 😅

    Yes, the ternary operator should be save for the changes in core and borlabs implementation would be great.

    Thanks,
    Patrick

    #1440490

    Hey!


    @Guenni007
    : Thanks for the info. I’ve tested the modified filter, but it still doesn’t work without the adjustments in the enfold/framework/js/conditional_load/avia_google_maps_api.js file.

    @Resonanz Digital: We’ve forwarded this thread to our channel.

    Cheers!
    Ismael

    #1440491

    Thanks Ismael,

    Keep me updated please.

    All the best,
    Patrick

    #1440545

    Yes, Ismael, the changes have to be made in avia_google_maps_api.js – but since you’ve set the ternary operator, it shouldn’t bother those who don’t need the filter.
    The change (read comments on snippet) only concerned instructions on how to create a code that could be used for filtering from the json code created by Google from that page: https://mapstyle.withgoogle.com/

    #1440549

    Hi,

    Thanks for the info. The modification will be included in the next patch.

    Best regards,
    Ismael

    #1440762

    Great news, thank you.

    Anything new on the Borlabs thing?

    All the best,
    Patrick

    #1441404

    Hi,

    Anything new on the Borlabs thing?

    I’m not entirely sure what you’re referring to. Did you open another thread about this issue?

    Best regards,
    Ismael

    #1441405

    Hi Ismael,

    It was here https://kriesi.at/support/topic/change-google-maps-styling/#post-1440344

    Günter also said it would be a nice feature.

    All the best,
    Patrick

    #1442659

    Hi,

    Sorry for the delay. I’m not aware of any plans regarding Borlabs implementation, but we’ve tagged @Guenter in this thread just in case he has more information.

    Best regards,
    Ismael

Viewing 26 posts - 1 through 26 (of 26 total)
  • You must be logged in to reply to this topic.